Introduction
Hello friends, today we are going to look at the tutorial on
How To Create Gradient Buttons For Blogger in this post. You have
seen many download buttons but you have never seen a download button like
this. I hope this tutorial will be very helpful for you.
How to create Gradient Buttons
- The first step is to open your Blogger Dashboard in your Google Chrome.
- Then click on your Themes option and then on the Edit Html option. themes > Edit Html.
- Copy this code below and paste it into your post.
<!---source code credits by tech with deo-->
<style>
/* Gradient Button */ .gButton{display:inline-flex;align-items:center;margin:12px 0;padding:12px 15px;outline:0;border:0;border-radius:50px;line-height:20px;color:#fffdfc;font-size:14px;font-weight:inherit;text-decoration:none;font-family:'Noto Sans', sans-serif;white-space:nowrap;overflow:hidden;max-width:100%;box-shadow:2px 2px 6px rgba(0,0,0, .1);background:linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);background-size:800%;-webkit-background-clip:background;-webkit-text-fill-color:#fff;animation:animategBtn 10s linear infinite} @keyframes animategBtn{100% {filter:hue-rotate(360deg)}} .gButton:hover{opacity:.8}
.gButtonInfo{display:flex;flex-wrap:wrap;justify-content:center;margin-top:12px;width:calc(100% + 12px);left:-6px;right:-6px;position:relative} .gButtonInfo>
*{margin:0 6px 12px} @media screen and (max-width:500px){.gButtonInfo >*{flex-grow:1;justify-content:center} .gButtonInfo >*:last-child{flex:0 0 auto}}
</style>
<!--[ Gradient Button 1 ]-->
<a class="gButton" href="#"><i class='icon download'></i>Download</a>
<!--[ Gradient Button 2 ]-->
<center><a class="gButton" href="#"><i class='icon download'></i>Download</a></center>
<!--[ Gradient Button 3 ]-->
<div class='gButtonInfo'>
<a class="gButton" href="#"><i class='icon download'></i>Download</a>
<a class="gButton" href="#"><i class='icon demo'></i>Demo</a>
</div>