Tạo button bằng CSS với hiệu ứng hover tuyệt đẹp cho Blogspot

#Thủ Thuật #Windows #Blogger #Facebook

Tạo button bằng CSS với hiệu ứng hover tuyệt đẹp cho Blogspot

Share:
Bài viết này mình sẽ giới thiệu đến các bạn mẫu 'button' với hiệu ứng hover tuyệt đẹp, sử dụng hoàn toàn CSS để tạo ra hiệu ứng. Mình có tham khảo một số trang khác, chỉnh sửa lại CSS và chia sẻ lại cho các bạn. Xem demo ngay tại đây luôn nhé, rê chuột vào nút bên dưới để xem hiệu ứng.
Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Chèn đoạn CSS dưới đây vào trước thẻ ]]></b:skin> trong template.
button{background:#55579e;border:none;position:relative;transition:800ms ease all;outline:none;font:700 24px "Roboto Condensed",sans-serif;text-transform:uppercase}
button a{color:#fff!important;padding:.5em 3em;display:block}
button:hover a{color:#55579e!important}
button:hover{background:transparent}
button:before,button:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#55579e;transition:900ms ease all}
button:after{right:inherit;top:inherit;left:0;bottom:0}
button:hover:before,button:hover:after{width:100%;transition:800ms ease all}
Bước 3: Lưu template.
Khi sử dụng các bạn dùng code sau: <button><a href='link'>Tên_hiển_thị</a></button>
Nếu trong blog bạn chưa có font Roboto Condensed thì thêm đoạn code này vào sau thẻ <head> trong template nhé.
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i' rel='stylesheet'/>
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.