Hôm nay đến với bài này mình sẽ đưa Blog của bạn lên một “phong cách mới” bằng cách tạo hiệu ứng nhảy cho các nút Button mà bạn thường hay sử dụng như: Live Demo | Mua Template | Free Download| .v.v… Với một đoạn CSS và sử dụng Font Awesome làm hiệu ứng. Rất bắt mắt với người dùng làm cho blog/Website của bạn trở nên chuyên nghiệp hơn.
Hướng dẫn cài đặt
Bước 1: Cài đặt code css
Bạn vào Blog => Chủ đề => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm thẻ ]]></b:skin>. Sau đó dán đoạn Code sau lên trên thẻ ]]></b:skin>. (Cài đặt các thuộc tính cơ bản cho nút Button)/* Custom Button by downloader.ga */
a.rabbi-button{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s}
a.rabbi-button:after {
content: '';position:absolute;z-index:-1;transition:all .3s;}
a.rabbi-button:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.rabbi-butt{background:#06A3ED;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.rabbi-butt:active {background:#06A3ED;top:2px;}
a.rabbi-butt span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.rabbi-butt:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.rabbi-butt:active:before {color:#fff;}
a.rabbi-buttlater:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.rabbi-buttlater:before {left:0;top:-110%;}
a.rabbi-buttlater:hover:before {top:0;padding-left:40%;text-decoration:none;}
a.rabbi-butticon:before {content: "\f135";}
@-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} Bước 2: Cài font awesome
Tiếp theo đó bấm tiếp tổ hợp phím Ctrl + F và tìm thẻ <head>. Sau đó dán đoạn Code phía dưới thẻ <head>.(Cài đặt Font Awesome tạo hiệu ứng cho nút Button)<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Bước 3: Lưu chủ đề
Bước 4: Thêm button
Để tạo nút Button trong bài đăng hay trên Blog, bạn chỉ việc thêm link đó như sau:
<a href="your-hyperlink-here" rel="nofollow" target="_blank" class="rabbi-button rabbi-butt rabbi-buttlater rabbi-butticon"><span>Live Demo</span></a>Tùy chỉnh
- #06A3ED: Màu bạn muốn hiện thị cho nút Button.
- f135: Font Awesome mà bạn muốn hiện thị (f135 là icon rocket, tra cứu các icon khác ở đây).
- Còn các kích thước khác hiệu chỉnh ngon lành cho các bạn rồi.
Kết luận
Đơn giản nhưng lại chuyên nghiệp chỉ dùng 1 đoạn CSS lại không ảnh gì đến template của bạn.
Dưới đây là Demo mình gắn trực tiếp ở bài viết cho các bạn tham khảo.
Chúc các bạn thành công!