How Make Demo and Download Buttons with Slide Effect

Make Button with Slide Effect

Guys Without further ado, can just get to the point.
But, before getting to the point, it would be nice if you look at the demo first, so that you do not feel wrong as meant by the title in this article.

Have you seen the demo? if so, then I assume you already know how to work from the button.
And now we go to the point.

☢️ PROCEDURES :

1. Add CSS below into your blog / website.

❇️ How add❓

Go to >> Blogger >> Theme >> Customize >>Advanced >> Add CSS [Paste code and apply theme]

#wrap {

    margin: 20px auto;

    text-align: center;

}

.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 #f80538;

}

.btn-slide:hover {

    background-color: #0099cc;

}

.btn-slide2:hover {

    background-color:#f80538;

}

.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: #f80538;

}

.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:#f80538;

}

.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: #f80538;

    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;

}

2. To bring up the button, copy the tag below into your blog / web post [I means in HTML section] .

<div id="wrap">

<a href="https://www.topblogpk.blogspot.com/" class="btn-slide" target="_blank">

  <span class="circle"><i class="fa fa-rocket"></i></span>

  <span class="title">Demo</span>

  <span class="title-hover">Click Here</span>

</a>

<a href="https://www.topblogpk.blogspot.com/" class="btn-slide2" 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>

Don't forget, on your blog you have to have a fontawesome to display the icon.
Usually blog templates now generally use fontawesome, but if you don't already have it, you can add fontawesome below to your blog / website.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Ok, enough of my short article, if you are still confused with my explanation, you can leave a question in the comments column below.
If you don't have any questions, then Skip ae