Thứ Bảy, 11 tháng 7, 2015

Code Button nhảy đẹp mắt tạo phong cách mới cho blogspot

Người đăng: Minh Tuyết vào lúc 16:32 | 0 nhận xét

Với một đoạn CSS và sử dụng Font Awesome làm hiệu ứng. Code Button nhảy 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.

☼ Sự chuyên nghiệp không thể nói thành lời

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)

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="http://designtuyetminhportfolio.blogspot.com/" 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ị.

· Còn các kích thước khác hiệu chỉnh ngon lành cho các bạn rồi.