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, Tricker Channel 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é.
.png) |
| Share code bộ button với 21 hiệu ứng hover tuyệt đẹp |
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="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-1 hover-filled-slide-up" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-1 hover-filled-slide-left" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-1 hover-filled-slide-right" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-1 hover-filled-opacity" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-2 hover-slide-down" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-2 hover-slide-up" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-2 hover-slide-left" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-2 hover-slide-right" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-2 hover-opacity" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-3 hover-border-1" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-3 hover-border-2" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-3 hover-border-3" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-3 hover-border-4" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-3 hover-border-5" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-4 hover-border-6" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-4 hover-border-7" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-4 hover-border-8" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-4 hover-border-9" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-4 hover-border-10" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center><center><button class="codepro-btn codepro-btn-5 hover-border-11" target="blank" title="Tricker Channel" onclick="window.open('https://trickerchannelvn.blogspot.com/')"><span>hover me</span></button></center>
Facebook: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...
