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.

Tạo nút Button cho blogspot

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:



☼ 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 @!


Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 nhận xét:

Post a Comment