Tạo Button Hover cực đẹp và chuyên nghiệp cho blog/website

Bài viết này mình sẽ giới thiệu đến các bạn mẫu Button Hover cực đẹp và chuyên nghiệp cho blog/website, sử dụng hoàn toàn CSS để tạo ra hiệu ứng. Button này mình tham khảo ở một trang nước ngoài, chỉnh sửa lại một số CSS và chia sẻ lại cho các bạn. Button này hoàn toàn bằng CSS nên mọi người cứ yên tâm không ảnh hưởng chút nào đến tốc độ load blog của các bạn.

Các bước thực hiện như sau:

Bước 1: Các bạn thêm đoạn CSS sau lên thẻ ]]></b:skin>

/* button */
.bttn-success {
color: #28b78d;
}
.bttn,
.bttn-lg,
.bttn-md,
.bttn-sm,
.bttn-xs {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
}
.bttn-md {
font-size: 20px;
font-family: inherit;
padding: 5px 22px;
}
.bttn-unite {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
font-size: 20px;
font-family: inherit;
padding: 5px 22px;
z-index: 0;
overflow: hidden;
border: 1px solid #1d89ff;
border-radius: 100px;
background: #fff;
color: #1d89ff;
-webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-unite:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
background: #d6e3ff;
content: '';
opacity: 0;
z-index: -1;
-webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: translate3d(-110%, -10%, 0) skewX(-20deg);
transform: translate3d(-110%, -10%, 0) skewX(-20deg);
}
.bttn-unite:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
background: rgba(214,227,255,0.7);
content: '';
opacity: 0;
z-index: -1;
-webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: translate3d(110%, -10%, 0) skewX(-20deg);
transform: translate3d(110%, -10%, 0) skewX(-20deg);
}
.bttn-unite:hover,
.bttn-unite:focus {
box-shadow: 0 1px 8px rgba(58,51,53,0.3);
color: #1d89ff;
-webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-unite:hover:before,
.bttn-unite:focus:before {
opacity: 1;
-webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: translate3d(-50%, -10%, 0) skewX(-20deg);
transform: translate3d(-50%, -10%, 0) skewX(-20deg);
}
.bttn-unite:hover:after,
.bttn-unite:focus:after {
opacity: 1;
-webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: translate3d(50%, -10%, 0) skewX(-20deg);
transform: translate3d(50%, -10%, 0) skewX(-20deg);
}
.bttn-unite.bttn-md {
font-size: 20px;
font-family: inherit;
padding: 5px 22px;
}
.bttn-unite.bttn-md:hover,
.bttn-unite.bttn-md:focus {
box-shadow: 0 1px 8px rgba(58,51,53,0.3);
}
.bttn-unite.bttn-success {
border-color: #28b78d;
color: #28b78d;
}
.bttn-unite.bttn-success:hover,
.bttn-unite.bttn-success:focus {
background: #28b78d;
color: #fff;
}
.bttn-unite.bttn-success:before {
background: #209271;
}
.bttn-unite.bttn-success:after {
background: #28b78d;
}