Tạo nút Demo và Download đẹp Blogspot bằng CSS3

Mình xin hướng dẫn các bạn tạo nút Demo và Download bằng CSS3 cho bài viết blog bằng slider cực kỳ đẹp và hấp dẫn cho Blogspot. Button Demo và Download bằng CSS3 hoạt động tốt trên hầu hết những trình duyệt được sử dụng phổ biến nhất hiện nay phải không. Do vậy bạn có thể tự do áp dụng mà không sợ vỡ bố cục trên các trình duyệt không tương thích nha. Giờ thì bạn có thể yên tâm để sử dụng nó rồi chứ, sau dây là các để thêm nó vào blog.

CSS3  Button Demo và Download

Đầu tiên các bạn mở Blogger lên --> Mẫu -->  Html edit --> tìm thẻ hoặc ]]></b:skin>  ( Nếu không thấy bạn có thể tìm thẻ </style> cũng được nhé !)  và dán mã dưới đây vào trước hai thẻ trên và bấm Save (lưu lại).

Đây là ví dụ thẻ <pre>

<style type='text/css'>
#wrap{margin:20px auto;text-align:center}
#wrap br{display:none}
.btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s}
.btn-slide2{border:2px solid #efa666}
.btn-slide:hover{background-color:#0099cc}
.btn-slide2:hover{background-color:#efa666}
.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2:hover span.circle2{color:#efa666}
.btn-slide:hover span.title,.btn-slide2:hover span.title2{left:40px;opacity:0}
.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px}
.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}
.btn-slide2 span.circle2{background-color:#efa666}
.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
.btn-slide2 span.title2,.btn-slide2 span.title-hover2{color:#efa666;left:80px}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0}
.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff}
</style>

 Sau khi đã làm các bước trên , mỗi khi đăng bài và các bạn sử dụng hai button Demo và Dowload, hoặc tùy ý các bạn chỉnh sửa thì các bạn sẽ đăng bài như bên dưới. Mở bài đăng mới lên -> soạn thảo chế độ html và dán mã sau vào.

<div id="wrap">
<a href="http://cuongstar.blogspot.com" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="http://cuongstar.blogspot.com" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Các bạn nhớ thay link cho phù hợp nha !