Preview and download buttons for animated blogger with attractive colors

Preview and download buttons for animated blogger with attractive colors

 


At the request of many visitors, this topic was included, although this addition is present on various Arab blogs, but it

 I received many requests to add download and preview icons, an orange and blue balloon, and God willing, through this topic I will put a code for you in addition to how to format it on your blog. We follow the explanation.

A live example of the addition


 Preview click here

Download click here


 ]]></b:skin> put the following code above

 #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 #315270;

margin: 10px;

    transition: .5s;

}

.btn-slide2 {

    border: 2px solid #ff8400;

}

.btn-slide:hover {

    background-color: #315270;

}

.btn-slide2:hover {

    background-color: #ff8400;

}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {

    left: 100%;

    margin-left: -45px;

    background-color: #fdfdfd;

    color: #315270;

}

.

btn-slide2:hover span.circle2 {

    color: #ff8400;

}

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

    color: #fff;

    position: absolute;

    float: left;

    margin: 3px;

    line-height: 42px;

    height: 40px;

    width: 40px;

    top: 0;

    left: 0;

    transition: .5s;

    border-radius: 50%;

}

.btn-slide2 span.circle2 {

    background-color: #ff8400;

}

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

    transition: .5s;

}

.btn-slide2 span.title2,

  .btn-slide2 span.title-hover2 {

    color: #ff8400;

    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;

}

Previous Post Next Post