Hello viewers, How are you I hope you are doing great. My name is Sadab Ali and welcome to Tech Aadi.
So today we are going to see How to Create And Use Stylish CSS Animated Buttons in blogger.
Do you know creative buttons with awesome style not only get a better look but users click to see the effect of that button.
So let's start the adding process.
Before starting please backup your blog template for any kind of errror and easy restoration.
Adding Stylish CSS Animated Buttons
There are only one code you have to add in your template after that you can use it in your blog where you want to add button with the html code. So follow the steps carefully.
Adding CSS
- Go to blogger dashboard.
- Go to theme section and click on edit HTML.
- Now search for the
</style>tag. - Copy the below given CSS and paste it just before/ahead the
</style>tag.
.ta-custom-btn{width:130px;height:40px;color:#fff;border-radius:5px;padding:10px 25px;font-family:'Lato',sans-serif;font-weight:500;background:transparent;cursor:pointer;transition:all 0.3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);outline:none}.ta-btn-1{background:rgb(6,14,131);background:linear-gradient(0deg,rgba(6,14,131,1) 0%,rgba(12,25,180,1) 100%);border:none}.ta-btn-1:hover{background:rgb(0,3,255);background:linear-gradient(0deg,rgba(0,3,255,1) 0%,rgba(2,126,251,1) 100%)}.ta-btn-2{background:rgb(96,9,240);background:linear-gradient(0deg,rgba(96,9,240,1) 0%,rgba(129,5,240,1) 100%);border:none}.ta-btn-2:before{height:0%;width:2px}.ta-btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)}.ta-btn-3{background:rgb(0,172,238);background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);width:130px;height:40px;line-height:42px;padding:0;border:none}.ta-btn-3 span{position:relative;display:block;width:100%;height:100%}.ta-btn-3:before,.ta-btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all 0.3s ease}.ta-btn-3:before{height:0%;width:2px}.ta-btn-3:after{width:0%;height:2px}.ta-btn-3:hover{background:transparent;box-shadow:none}.ta-btn-3:hover:before{height:100%}.ta-btn-3:hover:after{width:100%}.ta-btn-3 span:hover{color:rgba(2,126,251,1)}.ta-btn-3 span:before,.ta-btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all 0.3s ease}.ta-btn-3 span:before{width:2px;height:0%}.ta-btn-3 span:after{width:0%;height:2px}.ta-btn-3 span:hover:before{height:100%}.ta-btn-3 span:hover:after{width:100%}.ta-btn-4{background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);line-height:42px;padding:0;border:none}.ta-btn-4:hover{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%)}.ta-btn-4 span{position:relative;display:block;width:100%;height:100%}.ta-btn-4:before,.ta-btn-4:after{position:absolute;content:"";right:0;top:0;box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);transition:all 0.3s ease}.ta-btn-4:before{height:0%;width:.1px}.ta-btn-4:after{width:0%;height:.1px}.ta-btn-4:hover:before{height:100%}.ta-btn-4:hover:after{width:100%}.ta-btn-4 span:before,.ta-btn-4 span:after{position:absolute;content:"";left:0;bottom:0;box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);transition:all 0.3s ease}.ta-btn-4 span:before{width:.1px;height:0%}.ta-btn-4 span:after{width:0%;height:.1px}.ta-btn-4 span:hover:before{height:100%}.ta-btn-4 span:hover:after{width:100%}.ta-btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:rgb(255,27,0);background:linear-gradient(0deg,rgba(255,27,0,1) 0%,rgba(251,75,2,1) 100%)}.ta-btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}.ta-btn-5:before,.ta-btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}.ta-btn-5:after{right:inherit;top:inherit;left:0;bottom:0}.ta-btn-5:hover:before,.ta-btn-5:hover:after{width:100%;transition:800ms ease all}.ta-btn-6{background:rgb(247,150,192);background:radial-gradient(circle,rgba(247,150,192,1) 0%,rgba(118,174,241,1) 100%);line-height:42px;padding:0;border:none}.ta-btn-6 span{position:relative;display:block;width:100%;height:100%}.ta-btn-6:before,.ta-btn-6:after{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.ta-btn-6:before{right:0;top:0;transition:all 500ms ease}.ta-btn-6:after{left:0;bottom:0;transition:all 500ms ease}.ta-btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}.ta-btn-6:hover:before{transition:all 500ms ease;height:100%}.ta-btn-6:hover:after{transition:all 500ms ease;height:100%}.ta-btn-6 span:before,.ta-btn-6 span:after{position:absolute;content:"";box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.ta-btn-6 span:before{left:0;top:0;width:0%;height:.5px;transition:all 500ms ease}.ta-btn-6 span:after{right:0;bottom:0;width:0%;height:.5px;transition:all 500ms ease}.ta-btn-6 span:hover:before{width:100%}.ta-btn-6 span:hover:after{width:100%}.ta-btn-7{background:linear-gradient(0deg,rgba(255,151,0,1) 0%,rgba(251,75,2,1) 100%);line-height:42px;padding:0;border:none}.ta-btn-7 span{position:relative;display:block;width:100%;height:100%}.ta-btn-7:before,.ta-btn-7:after{position:absolute;content:"";right:0;bottom:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}.ta-btn-7:before{height:0%;width:2px}.ta-btn-7:after{width:0%;height:2px}.ta-btn-7:hover{color:rgba(251,75,2,1);background:transparent}.ta-btn-7:hover:before{height:100%}.ta-btn-7:hover:after{width:100%}.ta-btn-7 span:before,.ta-btn-7 span:after{position:absolute;content:"";left:0;top:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}.ta-btn-7 span:before{width:2px;height:0%}.ta-btn-7 span:after{height:2px;width:0%}.ta-btn-7 span:hover:before{height:100%}.ta-btn-7 span:hover:after{width:100%}.ta-btn-8{background-color:#f0ecfc;background-image:linear-gradient(315deg,#f0ecfc 0%,#c797eb 74%);line-height:42px;padding:0;border:none}.ta-btn-8 span{position:relative;display:block;width:100%;height:100%}.ta-btn-8:before,.ta-btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all 0.3s ease}.ta-btn-8:before{height:0%;width:2px}.ta-btn-8:after{width:0%;height:2px}.ta-btn-8:hover:before{height:100%}.ta-btn-8:hover:after{width:100%}.ta-btn-8:hover{background:transparent}.ta-btn-8 span:hover{color:#c797eb}.ta-btn-8 span:before,.ta-btn-8 span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all 0.3s ease}.ta-btn-8 span:before{width:2px;height:0%}.ta-btn-8 span:after{height:2px;width:0%}.ta-btn-8 span:hover:before{height:100%}.ta-btn-8 span:hover:after{width:100%}.ta-btn-9{border:none;transition:all 0.3s ease;overflow:hidden}.ta-btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f9 0%,#b621fe 74%);transition:all 0.3s ease}.ta-btn-9:hover{background:transparent;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}.ta-btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}.ta-btn-10{background:rgb(22,9,240);background:linear-gradient(0deg,rgba(22,9,240,1) 0%,rgba(49,110,244,1) 100%);color:#fff;border:none;transition:all 0.3s ease;overflow:hidden}.ta-btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all 0.3s ease;-webkit-transform:scale(.1);transform:scale(.1)}.ta-btn-10:hover{color:#fff;border:none;background:transparent}.ta-btn-10:hover:after{background:rgb(0,3,255);background:linear-gradient(0deg,rgba(2,126,251,1) 0%,rgba(0,3,255,1)100%);-webkit-transform:scale(1);transform:scale(1)}.ta-btn-11{border:none;background:rgb(251,33,117);background:linear-gradient(0deg,rgba(251,33,117,1) 0%,rgba(234,76,137,1) 100%);color:#fff;overflow:hidden}.ta-btn-11:hover{text-decoration:none;color:#fff}.ta-btn-11:before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite}.ta-btn-11:hover{opacity:.7}.ta-btn-11:active{box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0}}.ta-btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}.ta-btn-12 span{background:rgb(0,172,238);background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}.ta-btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.ta-btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.ta-btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}.ta-btn-12:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);color:transparent;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}.ta-btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%);border:none;z-index:1}.ta-btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease}.ta-btn-13:hover{color:#fff}.ta-btn-13:hover:after{top:0;height:100%}.ta-btn-13:active{top:2px}.ta-btn-14{background:rgb(255,151,0);border:none;z-index:1}.ta-btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:5px;background-color:#eaf818;background-image:linear-gradient(315deg,#eaf818 0%,#f6fc9c 74%);box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5);7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease}.ta-btn-14:hover{color:#000}.ta-btn-14:hover:after{top:auto;bottom:0;height:100%}.ta-btn-14:active{top:2px}.ta-btn-15{background:#b621fe;border:none;z-index:1}.ta-btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease}.ta-btn-15:hover{color:#fff}.ta-btn-15:hover:after{left:0;width:100%}.ta-btn-15:active{top:2px}.ta-btn-16{border:none;color:#000}.ta-btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease}.ta-btn-16:hover{color:#000}.ta-btn-16:hover:after{left:auto;right:0;width:100%}.ta-btn-16:active{top:2px}Now Click on Save Theme
Writing HTML Codes
Demo with HTML codes for using the buttons
Below are the given demos of Buttons with HTML code which you can use it anywhere in your blog.
<center><button class="ta-custom-btn ta-btn-1" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-2" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-3" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-4" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-5" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-6" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-7" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-8" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-9" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-10" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-11" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-12" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')"><span>Click!</span><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-13" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-14" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-15" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-16" target="blank" title="Tech Aadi" onclick="window.open('https://www.techaadi.eu.org/')">Read More</button></center>Now after adding this steps I hope you have successfully created Stylish CSS Animated Buttons in your blog. If you have got any error kindly contact us.
Conclusion
So today we have talked about How to Add Stylish CSS Animated Buttons in Blogger. I hope you like this post and please follow our blog. If you have any query kindly comment below.