Share code bộ button với 21 hiệu ứng hover tuyệt đẹp

Button không còn quá xa lạ với đa số người dùng internet hiện nay. Đối với nhà phát triển web, nhà thiết kế,... thì button là một thứ không thể thiếu. Ở bài viết này, Code Pro sẽ chia sẻ cho các bạn một bộ button với nhiều hiệu ứng khác nhau, cùng theo dõi nhé.

Share code bộ button với 21 hiệu ứng hover tuyệt đẹp

Bộ button này sử dụng hoàn toàn là CSS rất nhé nên sẽ không làm ảnh hưởng đến tốc độ tải trang. Các bạn yên tâm sử dụng nhé!

Demo CSS buttons hover effects

Hướng dẫn cài đặt

Bước 1: Copy toàn bộ CSS dưới đây:

<style type="text/css">
	*{box-sizing:border-box;margin:0;padding:0}.codepro-btn:active,.codepro-btn:hover,.codepro-btn:focus{outline:0!important;outline-offset:0}.codepro-btn::before,.codepro-btn::after{position:absolute;content:""}.codepro-btn-holder{display:flex;flex-wrap:wrap;justify-content:center;max-width:1000px;margin:10px auto 35px}.codepro-btn{position:relative;display:inline-block;width:auto;height:auto;background-color:transparent;border:none;cursor:pointer;margin:0 25px 15px;min-width:150px}.codepro-btn span{position:relative;display:inline-block;font-size:14px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;top:0;left:0;width:100%;padding:15px 20px;transition:0.3s}.codepro-btn-1::before{background-color:rgb(28,31,30);transition:0.3s ease-out}.codepro-btn-1 span{color:rgb(255,255,255);border:1px solid rgb(28,31,30);transition:0.2s 0.1s}.codepro-btn-1 span:hover{color:rgb(28,31,30);transition:0.2s 0.1s}.codepro-btn.hover-filled-slide-down::before{bottom:0;left:0;right:0;height:100%;width:100%}.codepro-btn.hover-filled-slide-down:hover::before{height:0%}.codepro-btn.hover-filled-slide-up::before{top:0;left:0;right:0;height:100%;width:100%}.codepro-btn.hover-filled-slide-up:hover::before{height:0%}.codepro-btn.hover-filled-slide-left::before{top:0;bottom:0;left:0;height:100%;width:100%}.codepro-btn.hover-filled-slide-left:hover::before{width:0%}.codepro-btn.hover-filled-slide-right::before{top:0;bottom:0;right:0;height:100%;width:100%}.codepro-btn.hover-filled-slide-right:hover::before{width:0%}.codepro-btn.hover-filled-opacity::before{top:0;bottom:0;right:0;height:100%;width:100%;opacity:1}.codepro-btn.hover-filled-opacity:hover::before{opacity:0}.codepro-btn-2::before{background-color:rgb(28,31,30);transition:0.3s ease-out}.codepro-btn-2 span{color:rgb(28,31,30);border:1px solid rgb(28,31,30);transition:0.2s}.codepro-btn-2 span:hover{color:rgb(255,255,255);transition:0.2s 0.1s}.codepro-btn.hover-slide-down::before{top:0;left:0;right:0;height:0%;width:100%}.codepro-btn.hover-slide-down:hover::before{height:100%}.codepro-btn.hover-slide-up::before{bottom:0;left:0;right:0;height:0%;width:100%}.codepro-btn.hover-slide-up:hover::before{height:100%}.codepro-btn.hover-slide-left::before{top:0;bottom:0;right:0;height:100%;width:0%}.codepro-btn.hover-slide-left:hover::before{width:100%}.codepro-btn.hover-slide-right::before{top:0;bottom:0;left:0;height:100%;width:0%}.codepro-btn.hover-slide-right:hover::before{width:100%}.codepro-btn.hover-opacity::before{top:0;bottom:0;right:0;height:100%;width:100%;opacity:0}.codepro-btn.hover-opacity:hover::before{opacity:1}.codepro-btn-3{padding:5px}.codepro-btn-3 span{color:rgb(255,255,255);background-color:rgb(54,56,55)}.codepro-btn-3::before,.codepro-btn-3::after{background:transparent;z-index:2}.codepro-btn.hover-border-1::before,.codepro-btn.hover-border-1::after{width:10%;height:25%;transition:0.35s}.codepro-btn.hover-border-1::before{top:0;left:0;border-left:1px solid rgb(28,31,30);border-top:1px solid rgb(28,31,30)}.codepro-btn.hover-border-1::after{bottom:0;right:0;border-right:1px solid rgb(28,31,30);border-bottom:1px solid rgb(28,31,30)}.codepro-btn.hover-border-1:hover::before,.codepro-btn.hover-border-1:hover::after{width:99%;height:98%}.codepro-btn.hover-border-2::before,.codepro-btn.hover-border-2::after{width:10%;height:25%;transition:0.35s}.codepro-btn.hover-border-2::before{bottom:0;left:0;border-left:1px solid rgb(28,31,30);border-bottom:1px solid rgb(28,31,30)}.codepro-btn.hover-border-2::after{top:0;right:0;border-right:1px solid rgb(28,31,30);border-top:1px solid rgb(28,31,30)}.codepro-btn.hover-border-2:hover::before,.codepro-btn.hover-border-2:hover::after{width:99%;height:99%}.codepro-btn.hover-border-3::before,.codepro-btn.hover-border-3::after{width:0%;height:0%;opacity:0;transition:width 0.2s 0.15s linear,height 0.15s linear,opacity 0s 0.35s}.codepro-btn.hover-border-3::before{top:0;right:0;border-top:1px solid rgb(28,31,30);border-left:1px solid rgb(28,31,30)}.codepro-btn.hover-border-3::after{bottom:0;left:0;border-bottom:1px solid rgb(28,31,30);border-right:1px solid rgb(28,31,30)}.codepro-btn.hover-border-3:hover::before,.codepro-btn.hover-border-3:hover::after{width:100%;height:99%;opacity:1;transition:width 0.2s linear,height 0.15s 0.2s linear,opacity 0s}.codepro-btn.hover-border-4::before,.codepro-btn.hover-border-4::after{width:0%;height:0%;opacity:0;transition:width 0.2s linear,height 0.15s 0.2s ease-out,opacity 0s 0.35s}.codepro-btn.hover-border-4::before{bottom:0;left:-1px;border-top:1px solid rgb(28,31,30);border-left:1px solid rgb(28,31,30)}.codepro-btn.hover-border-4::after{top:0;right:0;border-bottom:1px solid rgb(28,31,30);border-right:1px solid rgb(28,31,30)}.codepro-btn.hover-border-4:hover::before,.codepro-btn.hover-border-4:hover::after{width:100%;height:99%;opacity:1;transition:width 0.2s 0.15s ease-out,height 0.15s ease-in,opacity 0s}.codepro-btn.hover-border-5::before,.codepro-btn.hover-border-5::after{width:0%;height:0%;opacity:0}.codepro-btn.hover-border-5::before{top:0;right:0;border-top:1px solid rgb(28,31,30);border-left:1px solid rgb(28,31,30);transition:width 0.2s 0.5s ease-out,height 0.15s 0.35s linear,opacity 0s 0.7s}.codepro-btn.hover-border-5::after{bottom:0;left:0;border-bottom:1px solid rgb(28,31,30);border-right:1px solid rgb(28,31,30);transition:width 0.2s 0.15s linear,height 0.15s ease-in,opacity 0s 0.35s}.codepro-btn.hover-border-5:hover::before,.codepro-btn.hover-border-5:hover::after{width:100%;height:96%;opacity:1}.codepro-btn.hover-border-5:hover::before{transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s}.codepro-btn.hover-border-5:hover::after{transition:width 0.2s 0.35s linear,height 0.15s 0.5s ease-out,opacity 0s 0.3s}.codepro-btn-4 span{color:rgb(28,31,30);background-color:rgb(245,245,245)}.codepro-btn-4 span:hover{color:rgb(54,56,55)}.codepro-btn-4::before,.codepro-btn-4::after{width:15%;height:2px;background-color:rgb(54,56,55);z-index:2}.codepro-btn.hover-border-6::before,.codepro-btn.hover-border-6::after{top:0;transition:width 0.2s 0.35s ease-out}.codepro-btn.hover-border-6::before{right:50%}.codepro-btn.hover-border-6::after{left:50%}.codepro-btn.hover-border-6:hover::before,.codepro-btn.hover-border-6:hover::after{width:50%;transition:width 0.2s ease-in}.codepro-btn.hover-border-6 span::before,.codepro-btn.hover-border-6 span::after{width:0%;height:0%;background:transparent;opacity:0;z-index:2;transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.codepro-btn.hover-border-6 span::before{top:0;left:0;border-left:2px solid rgb(54,56,55);border-bottom:2px solid rgb(54,56,55)}.codepro-btn.hover-border-6 span::after{top:0;right:0;border-right:2px solid rgb(54,56,55);border-bottom:2px solid rgb(54,56,55)}.codepro-btn.hover-border-6 span:hover::before,.codepro-btn.hover-border-6 span:hover::after{width:50%;height:96%;opacity:1;transition:height 0.2s 0.2s ease-in,width 0.2s 0.4s linear,opacity 0s 0.2s}.codepro-btn.hover-border-7::before,.codepro-btn.hover-border-7::after{bottom:0;transition:width 0.2s 0.35s ease-out}.codepro-btn.hover-border-7::before{right:50%}.codepro-btn.hover-border-7::after{left:50%}.codepro-btn.hover-border-7:hover::before,.codepro-btn.hover-border-7:hover::after{width:50%;transition:width 0.2s ease-in}.codepro-btn.hover-border-7 span::before,.codepro-btn.hover-border-7 span::after{width:0%;height:0%;background:transparent;opacity:0;z-index:2;transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.codepro-btn.hover-border-7 span::before{bottom:0;left:0;border-left:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55)}.codepro-btn.hover-border-7 span::after{bottom:0;right:0;border-right:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55)}.codepro-btn.hover-border-7 span:hover::before,.codepro-btn.hover-border-7 span:hover::after{width:50%;height:96%;opacity:1;transition:height 0.2s 0.2s ease-in,width 0.2s 0.4s linear,opacity 0s 0.2s}.codepro-btn.hover-border-8::before,.codepro-btn.hover-border-8::after{bottom:0;width:15%;transition:width 0.2s 0.35s ease-out}.codepro-btn.hover-border-8::before{right:50%}.codepro-btn.hover-border-8::after{left:50%}.codepro-btn.hover-border-8:hover::before{width:50%;transition:width 0.2s ease-in}.codepro-btn.hover-border-8:hover::after{width:50%;transition:width 0.1s ease-in}.codepro-btn.hover-border-8 span::before,.codepro-btn.hover-border-8 span::after{width:0%;height:0%;bottom:0;background:transparent;opacity:0;z-index:2}.codepro-btn.hover-border-8 span::before{left:0%;border-left:2px solid rgb(54,56,55);transition:height 0.25s ease-in,opacity 0s 0.35s}.codepro-btn.hover-border-8 span:hover::before{height:96%;opacity:1;transition:height 0.25s 0.2s ease-out,opacity 0s 0.2s}.codepro-btn.hover-border-8 span::after{right:0%;border-right:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55);transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.codepro-btn.hover-border-8 span:hover::after{width:99%;height:96%;opacity:1;transition:height 0.15s 0.1s linear,width 0.2s 0.25s linear,opacity 0s 0.1s}.codepro-btn.hover-border-9::before,.codepro-btn.hover-border-9::after{bottom:0;width:15%;transition:width 0.2s 0.35s ease-out}.codepro-btn.hover-border-9::before{right:50%}.codepro-btn.hover-border-9::after{left:50%}.codepro-btn.hover-border-9:hover::before{width:50%;transition:width 0.1s ease-in}.codepro-btn.hover-border-9:hover::after{width:50%;transition:width 0.2s ease-in}.codepro-btn.hover-border-9 span::before,.codepro-btn.hover-border-9 span::after{width:0%;height:0%;bottom:0;background:transparent;opacity:0;z-index:2}.codepro-btn.hover-border-9 span::after{right:0%;border-right:2px solid rgb(54,56,55);transition:height 0.25s ease-in,opacity 0s 0.35s}.codepro-btn.hover-border-9 span:hover::after{height:96%;opacity:1;transition:height 0.25s 0.2s ease-out,opacity 0s 0.2s}.codepro-btn.hover-border-9 span::before{left:0%;border-left:2px solid rgb(54,56,55);border-top:2px solid rgb(54,56,55);transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s 0.35s}.codepro-btn.hover-border-9 span:hover::before{width:98.5%;height:96%;opacity:1;transition:height 0.15s 0.1s linear,width 0.2s 0.25s linear,opacity 0s 0.1s}.codepro-btn.hover-border-10::before,.codepro-btn.hover-border-10::after{left:0%;height:30%;width:2px;transition:height 0.2s 0.35s ease-out}.codepro-btn.hover-border-10::before{top:50%}.codepro-btn.hover-border-10::after{bottom:50%}.codepro-btn.hover-border-10:hover::before{height:50%;transition:height 0.2s ease-in}.codepro-btn.hover-border-10:hover::after{height:50%;transition:height 0.1s ease-in}.codepro-btn.hover-border-10 span::before,.codepro-btn.hover-border-10 span::after{width:0%;height:0%;background:transparent;opacity:0;z-index:2}.codepro-btn.hover-border-10 span::after{bottom:0;left:0%;border-bottom:2px solid rgb(54,56,55);transition:width 0.25s ease-in,opacity 0s 0.35s}.codepro-btn.hover-border-10 span:hover::after{width:100%;opacity:1;transition:width 0.25s 0.2s ease-out,opacity 0s 0.2s}.codepro-btn.hover-border-10 span::before{top:0%;left:0%;border-top:2px solid rgb(54,56,55);border-right:2px solid rgb(54,56,55);transition:height 0.15s ease-in,width 0.2s 0.15s linear,opacity 0s 0.35s}.codepro-btn.hover-border-10 span:hover::before{width:98.5%;height:96%;opacity:1;transition:width 0.2s 0.1s linear,height 0.15s 0.3s ease-out,opacity 0s 0.1s}.codepro-btn-5 span{color:rgb(28,31,30);border:2px solid rgb(249,211,27);transition:0.2s}.codepro-btn-5 span:hover{background-color:rgb(245,245,245)}.codepro-btn.hover-border-11::before,.codepro-btn.hover-border-11::after{width:100%;height:2px;background-color:rgb(54,56,55);z-index:2;transition:0.35s}.codepro-btn.hover-border-11::before{top:0;right:0}.codepro-btn.hover-border-11::after{bottom:0;left:0}.codepro-btn.hover-border-11:hover::before,.codepro-btn.hover-border-11:hover::after{width:0%;transition:0.2s 0.2s ease-out}.codepro-btn.hover-border-11 span::before,.codepro-btn.hover-border-11 span::after{width:2px;height:100%;background-color:rgb(54,56,55);z-index:2;transition:0.25s}.codepro-btn.hover-border-11 span::before{bottom:0;right:-2px}.codepro-btn.hover-border-11 span::after{top:0;left:-2px}.codepro-btn.hover-border-11 span:hover::before,.codepro-btn.hover-border-11 span:hover::after{height:0%}
</style>

Bước 2: Chèn toàn bộ code vừa copy vào trước thẻ </body>

Bước 3: Lưu lại!

Hướng dẫn sử dụng

Dưới đây là 21 button với hiệu ứng hover khác nhau. Các bạn muốn sử dụng mẫu nào thì copy code tương ứng với mẫu đấy!

<center><button class="codepro-btn codepro-btn-1 hover-filled-slide-down" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-1 hover-filled-slide-up" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-1 hover-filled-slide-left" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-1 hover-filled-slide-right" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-1 hover-filled-opacity" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-2 hover-slide-down" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-2 hover-slide-up" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-2 hover-slide-left" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-2 hover-slide-right" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-2 hover-opacity" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-3 hover-border-1" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-3 hover-border-2" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-3 hover-border-3" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-3 hover-border-4" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-3 hover-border-5" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-4 hover-border-6" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-4 hover-border-7" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-4 hover-border-8" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-4 hover-border-9" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-4 hover-border-10" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

<center><button class="codepro-btn codepro-btn-5 hover-border-11" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>hover me</span></button></center>

Lời kết

Trên đây là toàn bộ code và hướng dẫn tạo button với hiệu ứng hover tuyệt đẹp. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Code Pro