Chia sẻ button hiệu ứng hover độc đáo dành cho blogspot

- Xin chào các bạn, chào mừng các bạn quay lại với Blogspot247, ở bài viết này mình xin chia sẻ cho anh em một style button mới dành cho blogspot, button này có hiệu ứng hover thay đổi màu sắc chữ và màu của viền bên ngoài trông rất tinh tế và chuyên nghiệp.

- Button này không được đẹp như các button khác và nó chỉ có hầu như một hiệu ứng hover thôi chứ không màu mè, hoa lá như các style mà nhiều người đã chia sẻ, đây là mẫu button dành cho những người thích đơn điệu, không cầu kì, không nhiều màu sắc.

Thêm CSS cho button

- Đầu tiên bạn cho đoạn CSS sau lên trên thẻ đóng ]]></b:skin> , đây là CSS sẽ phụ trách các hiệu ứng cũng như chiều rộng , dài của button.

Copy

/*Button Download hiệu ứng hover*/

a.button-blackspy{margin: 0 0 15px;padding: 8px 40px;display: inline-block;font: 700 12px 'Roboto',sans-serif;text-transform: uppercase;border: 2px solid #ddd}

a.button-blackspy:hover{text-decoration:none!important;border-color:#66689c;color:#66689c}

 Chèn button vào bài viết

- Để chèn được button này vào bài viết, bạn chuyển qua chế độ soạn thảo html và paste đoạn HTML này vào và chỉnh sửa theo ý của bạn : 

Copy

<center>

<a class="button-blackspy ripple" href="#link">Tiêu đề button</a>

</center>

Xem demo button

Xem Demo Tải về

Tổng kết

- Bài viết đến đây là kết thúc, nếu bạn thích mẫu button này đừng quên để lại một comment góp ý và chia sẻ bài viết lên Google+, Facebook để blog thêm phát triển. Chúc các bạn có một ngày làm việc hiệu quả !

Chú ý : có chia sẻ đi đâu vui lòng ghi nguồn Blogspot247.Com