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.
View Demo
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
Step 1: First of all Login to your Blogger Dashboard.
Step 2: Go to theme section and click on edit HTML.
Step 3: Now search for the
</style> tag.Step 4: 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="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-2" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-3" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-4" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-5" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-6" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-7" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-8" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')"><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-9" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-10" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-11" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-12" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')"><span>Click!</span><span>Read More</span></button></center><center><button class="ta-custom-btn ta-btn-13" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-14" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-15" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">Read More</button></center><center><button class="ta-custom-btn ta-btn-16" target="blank" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" onclick="window.open('https://www.abdullahcoded.blogspot.com/')">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
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
