[Thủ Thuật Blogspot] Tạo Button Flat đẹp và chuyên nghiệp cho Blogspot

Ở bài viết này mình sẽ hướng dẫn các bạn tạo nút (Button) Flat đẹp và chuyên nghiệp cho Blogspot.

CÁCH THỰC HIỆN

Bước 1:

Vào Blogger > Chủ đề > Chỉnh sửa HTML

Bước 2:

Thêm đoạn CSS phía dưới vào TRƯỚC thẻ </style> sau đó bạn lưu lại template.

#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}

Ghi chú: 
- 30abd5 là màu hiệu ứng lật
- f5f7fa là màu nền khi chưa lật
- Nếu có trình độ một chút về CSS bạn có thể dễ dàng tùy chỉnh màu sắc, kích thước, hiệu ứng của nút.

Bước 3:

Khi viết bài viết mới, mỗi khi bạn muốn thêm button flat mà bạn đã tạo, hãy chuyển qua tab HTML và chèn 1 trong 2 dòng lệnh phía dưới vào để hiện thị style nút bạn muốn.

<div id="wrap"><a class="btn" href="#">Button</a></div>

<div id="wrap"><a class="btn warn" href="#">Button</a></div>

DEMO

Chúc các bạn thành công!