How to create a beautiful Download button for Blogger

ok, you guys can help me share the blog if there's any part you don't understand, please leave a comment below

Today I will show you how to create a beautiful Download button for Blogger . With beautiful download button will bring good user experience, easy to identify links, beautiful and very professional

For bloggers who work in the field of sharing software, documents or resources, of course, there will be a download button for each article. So creating a nice download button will be easy for users to see and your blog will look better. With a few simple codes using CSS you will have a beautiful button in no time by the way below.

Ceate a beautiful Download button for Blogger

Step 1: Go to Blogger > Templates > Edit HTML

Step 2: Check if your template already has the below code, if not, insert it before the closing </head> tag. 

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>

Step 3: Find before the closing ]]></b:skin> tag and insert the CSS snippet below.

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

Step 4: Save the Template again.

Step 5: When writing an article, you want to insert a Download button into the article, then switch to HTML editing mode and paste the following HTML where you want to display it.

Download style 1 button

<div id="wrap">
<a class="btn-slide" href="http://www.binhpro.com/" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Download</span>
  <span class="title-hover">Click here</span>
</a>

Download style 2 button

<a class="btn-slide2" href="http://www.binhpro.com/" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Change the link www.manhvilla.xyz to your link. In addition, you can customize the CSS to your liking to match your template.

ok, you guys can help me share the blog if there's any part you don't understand, please leave a comment below

style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">



style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3504565454660613"
data-ad-slot="6455831820">