Subscribe Youtube Channel Muxic 0.9 ♪ Contact Us Subscribe!
Home
Blogging

Best Buttons with Beautiful Hover Effect with only CSS for Blogger

Discover stunning CSS-only hover effects for blogger buttons! Enhance your site's appeal with our easy-to-implement, beautiful designs.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Beautiful Hover Effect 

Let's Begin

Step #1:  Login to your Blogger Dashboard

Step #2: Click on theme section.

Step #3: After that edit HTML.

Step #4: Then search for the </body> tag.

Step #5: Now copy the below given CSS and paste it before the </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>
Step #6: Now click on save theme. 
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="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-slide-up" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-slide-left" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-slide-right" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-1 hover-filled-slide-opacity" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-filled-slide-down" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-filled-slide-up" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-filled-slide-left" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-filled-slide-right" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-2 hover-filled-slide-opacity" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-1" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-2" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-3" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-4" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
 
<center><button class="ta-btn ta-btn-3 hover-border-5" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-3 hover-border-6" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-4 hover-border-8" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
 
<center><button class="ta-btn ta-btn-4 hover-border-9" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>
<center><button class="ta-btn ta-btn-4 hover-border-10" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>

<center><button class="ta-btn ta-btn-5 hover-border-11" target="blank" title="abdullahdcurz" onclick="window.open('https://abdullahdcurz.blogspot.com//')"><span>hover me</span></button></center>

I hope you were able to successfully add the Colorful Heart Effect to your Blogger blog after completing the preceding steps. Please contact us if you experience any kind of issue.

Before starting always backup your template for any kind of error and easy restoration.

Copyright:
www.abdullahdcurz.blogspot.com

Go to Link
Go to Link

About the Author

Welcome to my Site! Hi, this is Mr.Abdullah. If you have any questions related to this blog you can find us here on Instagram @abdullahdcurz Or, you can mail us here: abdullahdcurz@mail.com. Thank you.
#Blogging

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
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.
Site is Blocked
Sorry! This site is not available in your country.