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.
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
- Open Blogger dashboard.
- Go to theme section and then click on edit html.
- Now search for </body> tag.
- 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>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