Tạo Button Flat đẹp và chuyên nghiệp cho Blogspot

Có thể bạn sẽ thích

Trên mạng hiện nay có rất nhiều Button CSS rất đẹp và bắt mắt. Tuy nhiên với bài viết này mình sẽ hướng dẫn các bạn cài đặt nút "Button" Flat đẹp và chuyên nghiệp cho Blogspot. Bài viết này khá đơn giản đối với những bạn mới bắt đầu tập tành CSS hay HTML . Nếu trình cao hơn có thể tự Viewcode hoặc tự tạo riêng Button sẽ nhanh hơn ^^

#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 đó 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;}

• Bước 3: Khi viết bài viết mới bạn muốn thêm button 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>

Khá đơn giản phải không nào! Chúc bạn thành công!

#DEMO

NOTE: 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.

Hãy để lại comment phía dưới hoặc Chia sẻ bài viết để ủng hộ tác giả nhé!

Kelvin Dương

Mong muốn chia sẻ những hiểu biết cũng như kinh nghiệm của bản thân đến với mọi người

Life is not fair, get used to it

CHIA SẺ BÀI VIẾT

BÀI VIẾT LIÊN QUAN