Tạo button với hiệu ứng hover cực cool!

Hôm nay, mình bắt gặp một bài hướng dẫn tạo button có hiệu ứng di chuột đẹp đẹp nên mình mang về viết lại cho anh em tham khảo :3

DEMO BUTTON

See the Pen Button hover by Nguyễn Đăng Khải (@dangkhaiit) on CodePen.

Các bước thực hiện

Đầu tiên chèn đoạn CSS dưới trước ]]></b:skin>

/* CSS Hover Button */
a.hv-bt-fsb{
   position: absolute;
   padding: 10px 30px;
   border: 2px solid #5ea0e4;
   color:#5ea0e4;
   text-decoration:none;
   text-transform:uppercase;
   letter-spacing:2px;
   font-weight:600;
   transition:1s;
   overflow:hidden;
}
a.hv-bt-fsb:before,
a.hv-bt-fsb:after,
span.sp-bt-fsb:before,
span.sp-bt-fsb:after{
   content:'';
   position:absolute;
   height:100%;
   width:26%;
   background:#5ea0e4;
   z-index:-1;
   transition:1s;
}
a.hv-bt-fsb:before{
   top:0;
   left:-26%;
}
a.hv-bt-fsb:hover:before{
   top:0;
   left:0;
}
a.hv-bt-fsb:after{
   top:0;
   right:-26%;
}
a.hv-bt-fsb:hover:after{
   top:0;
   right:0;
}
span.sp-bt-fsb:before{
   bottom:-100%;
   left:25%;
}
a.hv-bt-fsb:hover span.sp-bt-fsb:before{
   bottom:0;
   left:25%;
}
span.sp-bt-fsb:after{
   top:-100%;
   left:50%;
}
a.hv-bt-fsb:hover span.sp-bt-fsb:after{
   top:0;
   left:50%;
}
a.hv-bt-fsb:hover{
   color:white;
   transition:1.5s;
}