Tạo nút Button hiệu ứng nhảy cho blogspot

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| Download| Đọc thêm .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.

Font Awesome là gì ? Font Awesome có những vượt trội gì so với hình ảnh ? Cách sử dụng Font Awesome ?

Đọc thêm:

● Hướng dẫn cài đặt sử dụng Font Awesome cho Blogspot (blogger)

● 7 hiệu ứng bay sinh động của twitter cho blogspot

☼ Sự chuyên nghiệp không thể nói thành lời @! Thực hiện cùng Windows2it.

Cài đặt:

Bước 1: Bạn vào Blog => Mẫu => 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 www.windows2it.com */
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: 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ẻ ]]></b:skin>.(Cài đặt Font Awesome tạo hiệu ứng cho nút Button)

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Bước 3: Lưu mẫu một bước quá khó khăn (-_-)

Hướng dẫn sử dụng: Để 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="www.windows2it.com" rel="”nofollow”" target="_blank" class="rabbi-button rabbi-butt rabbi-buttlater rabbi-butticon"><span>Live Demo</span></a>

Live Demo

☼ 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ị.

· 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.

BACKLINK PHÂN TÍCH HOẠT ĐỘNG TÍN DỤNG CÁ NHÂN

Còn bạn nào muốn Support gì thì cứ để lại comment @!