CSS buttons hover effects

‍Step 1: All Code Copy CSS

<style type="text/css">

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

</style>

‍Step 2: Copy TO Paste </body>

‍Step 3: Copy TO Paste Button code

01.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-1 hover-filled-slide-down" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

02.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-1 hover-filled-slide-up" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

03.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-1 hover-filled-slide-left" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

04.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-1 hover-filled-slide-right" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

05.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-1 hover-filled-opacity" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

06.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-2 hover-slide-down" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

07.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-2 hover-slide-up" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

08.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-2 hover-slide-left" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

09.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-2 hover-slide-right" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

10.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-2 hover-opacity" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

11.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-3 hover-border-1" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

12.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-3 hover-border-2" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

13.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-3 hover-border-3" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

14.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-3 hover-border-4" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

15.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-3 hover-border-5" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

16.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-4 hover-border-6" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

17.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-4 hover-border-7" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

18.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-4 hover-border-8" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

19.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-4 hover-border-9" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

20.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-4 hover-border-10" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

21.

<center><button class="masudcomputerbd-btn masudcomputerbd-btn-5 hover-border-11" target="blank" title="Masud Computer BD" onclick="window.open('https://www.masudcomputerbd.com/')"><span>hover me</span></button></center>

css button hover effects,css hover effects,button hover effect css,button hover effects,css button effects,button hover effect,hover effect,css button hover effect,awesome css button hover effects,button hover effect using css,button hover effects css,css hover effect,cool button hover effect html css,css modern button hover effects,css button hover,css buttons hover effects,css top button hover effects,css effects,cool css button hover effects

Newer post Older post

ads1

পরিচিতদেরকে জানাতে শেয়ার করুন

ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।

ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

ডোমেইন চেকার এই লিংকে চাপ দিন ।

আপনার জন্য আরো কিছু পোস্ট