Website đang trong giai đoạn hoàn thiện và chạy thử nghiệm, rất mong nhận được sự đóng góp ý kiến của mọi người để website hoàn thiện tốt hơn! Đóng góp

Table of Content

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

code button đẹp, hiệu ứng hover button đẹp, tạo button đẹp, button đẹp cho website, button cho blog, hiệu ứng rê chuột button, nút button đẹp, button

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
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

Sống hết mình !

6 comments

  1. Toàn button chất thôi
    1. chất chần chật 😆
  2. 😂😂😂
    1. 😝😝😝
  3. Admin
    This comment has been removed by a blog administrator.
    1. Please! Don't spam my site