Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Table of Content

How To Create Gradient Buttons For Blogger

Hello friends, today we are going to look at the tutorial on How To Create Gradient Buttons For Blogger in this post.

How To Create Gradient Buttons For Blogger

 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.
Demo

How to create Gradient Buttons

  1. The first step is to open your Blogger Dashboard in your Google Chrome. 
  2. Then click on your Themes option and then on the Edit Html option. themes > Edit Html.
  3. Copy this code below and paste it into your post.
  4. <!---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>

Conclusion 

I hope you understand How To Create Gradient Button For Blogger through this post. If you have any doubts after reading this post please let us know your top comments in the comment box.
Student / Blogger / Content Writer

Post a Comment