Tạo nút demo và dowload hiệu ứng động cho blogger

Thứ Hai, 11 tháng 12, 2017

Xin chào quý bạn và các vị :D

Nay mình hướng dẫn các bạn thêm hiệu ứng động cho 2 nút demo và dowload trên blogger

Cách thực hiện
=============
Bước 1: Thêm CSS phía dưới vào trước thẻ ]]></b:skin>.

/* Custom Button by hoanhihiblog */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:#58257b;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}a.rabbi-butt:active {background:#58257b;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)}}