Buy Plus UI v2.6! Demo Buy Now!

21 Buttons with Beautiful Hover Effect with only CSS

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello friends, how are you I hope you all are good and doing great. So we are going to see the tutorial of 21 Buttons with Beautiful Hover Effect with only CSS.

21 Buttons with Beautiful Hover Effect with only CSS

Nowadays there are many types of buttons and codes available. But this one is also very good for blog. Because here CSS is used so it will not effect the blog performance.

So let's start the process.

Before following below steps kindly do backup your theme for any kind of error and easy restoration.

Installing Buttons with Hover Effect

Step 1

  1. Open Blogger dashboard.
  2. Go to theme section and then click on edit html.
  3. Now search for </body> tag.
  4. Copy the below given css before </body> tag.
<style type="text/css">
	*{box-sizing:border-box;margin:0;padding:0}.ta-btn:active,.ta-btn:hover,.ta-btn:focus{outline:0!important;outline-offset:0}.ta-btn::before,.ta-btn::after{position:absolute;content:""}.ta-btn-holder{display:flex;flex-wrap:wrap;justify-content:center;max-width:1000px;margin:10px auto 35px}.ta-btn{position:relative;display:inline-block;width:auto;height:auto;background-color:transparent;border:none;cursor:pointer;margin:0 25px 15px;min-width:150px}.ta-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}.ta-btn-1::before{background-color:rgb(28,31,30);transition:0.3s ease-out}.ta-btn-1 span{color:rgb(255,255,255);border:1px solid rgb(28,31,30);transition:0.2s 0.1s}.ta-btn-1 span:hover{color:rgb(28,31,30);transition:0.2s 0.1s}.ta-btn.hover-filled-slide-down::before{bottom:0;left:0;right:0;height:100%;width:100%}.ta-btn.hover-filled-slide-down:hover::before{height:0%}.ta-btn.hover-filled-slide-up::before{top:0;left:0;right:0;height:100%;width:100%}.ta-btn.hover-filled-slide-up:hover::before{height:0%}.ta-btn.hover-filled-slide-left::before{top:0;bottom:0;left:0;height:100%;width:100%}.ta-btn.hover-filled-slide-left:hover::before{width:0%}.ta-btn.hover-filled-slide-right::before{top:0;bottom:0;right:0;height:100%;width:100%}.ta-btn.hover-filled-slide-right:hover::before{width:0%}.ta-btn.hover-filled-opacity::before{top:0;bottom:0;right:0;height:100%;width:100%;opacity:1}.ta-btn.hover-filled-opacity:hover::before{opacity:0}.ta-btn-2::before{background-color:rgb(28,31,30);transition:0.3s ease-out}.ta-btn-2 span{color:rgb(28,31,30);border:1px solid rgb(28,31,30);transition:0.2s}.ta-btn-2 span:hover{color:rgb(255,255,255);transition:0.2s 0.1s}.ta-btn.hover-slide-down::before{top:0;left:0;right:0;height:0%;width:100%}.ta-btn.hover-slide-down:hover::before{height:100%}.ta-btn.hover-slide-up::before{bottom:0;left:0;right:0;height:0%;width:100%}.ta-btn.hover-slide-up:hover::before{height:100%}.ta-btn.hover-slide-left::before{top:0;bottom:0;right:0;height:100%;width:0%}.ta-btn.hover-slide-left:hover::before{width:100%}.ta-btn.hover-slide-right::before{top:0;bottom:0;left:0;height:100%;width:0%}.ta-btn.hover-slide-right:hover::before{width:100%}.ta-btn.hover-opacity::before{top:0;bottom:0;right:0;height:100%;width:100%;opacity:0}.ta-btn.hover-opacity:hover::before{opacity:1}.ta-btn-3{padding:5px}.ta-btn-3 span{color:rgb(255,255,255);background-color:rgb(54,56,55)}.ta-btn-3::before,.ta-btn-3::after{background:transparent;z-index:2}.ta-btn.hover-border-1::before,.ta-btn.hover-border-1::after{width:10%;height:25%;transition:0.35s}.ta-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)}.ta-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)}.ta-btn.hover-border-1:hover::before,.ta-btn.hover-border-1:hover::after{width:99%;height:98%}.ta-btn.hover-border-2::before,.ta-btn.hover-border-2::after{width:10%;height:25%;transition:0.35s}.ta-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)}.ta-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)}.ta-btn.hover-border-2:hover::before,.ta-btn.hover-border-2:hover::after{width:99%;height:99%}.ta-btn.hover-border-3::before,.ta-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}.ta-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)}.ta-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)}.ta-btn.hover-border-3:hover::before,.ta-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}.ta-btn.hover-border-4::before,.ta-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}.ta-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)}.ta-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)}.ta-btn.hover-border-4:hover::before,.ta-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}.ta-btn.hover-border-5::before,.ta-btn.hover-border-5::after{width:0%;height:0%;opacity:0}.ta-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}.ta-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}.ta-btn.hover-border-5:hover::before,.ta-btn.hover-border-5:hover::after{width:100%;height:96%;opacity:1}.ta-btn.hover-border-5:hover::before{transition:width 0.2s ease-in,height 0.15s 0.2s linear,opacity 0s}.ta-btn.hover-border-5:hover::after{transition:width 0.2s 0.35s linear,height 0.15s 0.5s ease-out,opacity 0s 0.3s}.ta-btn-4 span{color:rgb(28,31,30);background-color:rgb(245,245,245)}.ta-btn-4 span:hover{color:rgb(54,56,55)}.ta-btn-4::before,.ta-btn-4::after{width:15%;height:2px;background-color:rgb(54,56,55);z-index:2}.ta-btn.hover-border-6::before,.ta-btn.hover-border-6::after{top:0;transition:width 0.2s 0.35s ease-out}.ta-btn.hover-border-6::before{right:50%}.ta-btn.hover-border-6::after{left:50%}.ta-btn.hover-border-6:hover::before,.ta-btn.hover-border-6:hover::after{width:50%;transition:width 0.2s ease-in}.ta-btn.hover-border-6 span::before,.ta-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}.ta-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)}.ta-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)}.ta-btn.hover-border-6 span:hover::before,.ta-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}.ta-btn.hover-border-7::before,.ta-btn.hover-border-7::after{bottom:0;transition:width 0.2s 0.35s ease-out}.ta-btn.hover-border-7::before{right:50%}.ta-btn.hover-border-7::after{left:50%}.ta-btn.hover-border-7:hover::before,.ta-btn.hover-border-7:hover::after{width:50%;transition:width 0.2s ease-in}.ta-btn.hover-border-7 span::before,.ta-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}.ta-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)}.ta-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)}.ta-btn.hover-border-7 span:hover::before,.ta-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}.ta-btn.hover-border-8::before,.ta-btn.hover-border-8::after{bottom:0;width:15%;transition:width 0.2s 0.35s ease-out}.ta-btn.hover-border-8::before{right:50%}.ta-btn.hover-border-8::after{left:50%}.ta-btn.hover-border-8:hover::before{width:50%;transition:width 0.2s ease-in}.ta-btn.hover-border-8:hover::after{width:50%;transition:width 0.1s ease-in}.ta-btn.hover-border-8 span::before,.ta-btn.hover-border-8 span::after{width:0%;height:0%;bottom:0;background:transparent;opacity:0;z-index:2}.ta-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}.ta-btn.hover-border-8 span:hover::before{height:96%;opacity:1;transition:height 0.25s 0.2s ease-out,opacity 0s 0.2s}.ta-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}.ta-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}.ta-btn.hover-border-9::before,.ta-btn.hover-border-9::after{bottom:0;width:15%;transition:width 0.2s 0.35s ease-out}.ta-btn.hover-border-9::before{right:50%}.ta-btn.hover-border-9::after{left:50%}.ta-btn.hover-border-9:hover::before{width:50%;transition:width 0.1s ease-in}.ta-btn.hover-border-9:hover::after{width:50%;transition:width 0.2s ease-in}.ta-btn.hover-border-9 span::before,.ta-btn.hover-border-9 span::after{width:0%;height:0%;bottom:0;background:transparent;opacity:0;z-index:2}.ta-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}.ta-btn.hover-border-9 span:hover::after{height:96%;opacity:1;transition:height 0.25s 0.2s ease-out,opacity 0s 0.2s}.ta-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}.ta-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}.ta-btn.hover-border-10::before,.ta-btn.hover-border-10::after{left:0%;height:30%;width:2px;transition:height 0.2s 0.35s ease-out}.ta-btn.hover-border-10::before{top:50%}.ta-btn.hover-border-10::after{bottom:50%}.ta-btn.hover-border-10:hover::before{height:50%;transition:height 0.2s ease-in}.ta-btn.hover-border-10:hover::after{height:50%;transition:height 0.1s ease-in}.ta-btn.hover-border-10 span::before,.ta-btn.hover-border-10 span::after{width:0%;height:0%;background:transparent;opacity:0;z-index:2}.ta-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}.ta-btn.hover-border-10 span:hover::after{width:100%;opacity:1;transition:width 0.25s 0.2s ease-out,opacity 0s 0.2s}.ta-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}.ta-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}.ta-btn-5 span{color:rgb(28,31,30);border:2px solid rgb(249,211,27);transition:0.2s}.ta-btn-5 span:hover{background-color:rgb(245,245,245)}.ta-btn.hover-border-11::before,.ta-btn.hover-border-11::after{width:100%;height:2px;background-color:rgb(54,56,55);z-index:2;transition:0.35s}.ta-btn.hover-border-11::before{top:0;right:0}.ta-btn.hover-border-11::after{bottom:0;left:0}.ta-btn.hover-border-11:hover::before,.ta-btn.hover-border-11:hover::after{width:0%;transition:0.2s 0.2s ease-out}.ta-btn.hover-border-11 span::before,.ta-btn.hover-border-11 span::after{width:2px;height:100%;background-color:rgb(54,56,55);z-index:2;transition:0.25s}.ta-btn.hover-border-11 span::before{bottom:0;right:-2px}.ta-btn.hover-border-11 span::after{top:0;left:-2px}.ta-btn.hover-border-11 span:hover::before,.ta-btn.hover-border-11 span:hover::after{height:0%}
</style>
Now click on save theme.

Step 2

Below are the demo with codes for using the button. Copy the code from below buttons when you want to use any button on your blog.
<center><button class="ta-btn ta-btn-1 hover-filled-slide-down" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-slide-up" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-slide-left" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-slide-right" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-opacity" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-slide-down" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-slide-up" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-slide-left" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-slide-right" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-opacity" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-1" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-2" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-3" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-4" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-5" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-4 hover-border-6" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-4 hover-border-7" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-4 hover-border-8" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-4 hover-border-9" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-4 hover-border-10" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-5 hover-border-11" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>hover me</span></button></center>

Change the button title Tech Aadi and link 🔗 url www.techaadi.eu.org as per yours.

Now after following the above steps I hope you have successfully installed the buttons on your blog with the help of tutorial. If you encounter any problems kindly contact me.

Conclusion

So today we have talked about 21 Button with Beautiful Hover Effect with only CSS. If you have any query kindly do comment below and like our post. And stay tuned for more post like this do visit again 😊.

Reference:
www.code.pro.vn

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

3 comments

  1. so many great tips bro, i voted 5 stars
    1. Yup... 😊
  2. Thanks dear😊😊
Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.