Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

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