Install the Demo Slide and Download Button

Today I will share a tutorial installing the demo button and download it with slide effect.

I made this tutorial at my friend's request here to create demo and download buttons with interesting animation effects. Ok, just listen to the way.

Note: Before you have applied fontawesome to the blog

First open blogger> Template> Click Edit HTML and apply the code below right before </style> or ]]> </ b: skin>

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

Save the template.

The next step, for the caller code please apply to the HTML tab posting.

To make it look neat when entering HTML code into posts, you should use Press "Enter" for a new line in the "Options" menu as shown below

Done.

See the Pen Demo and download buttons by Raheel (@rhlsahb) on CodePen.

Facebook SDK

Post a Comment

إرسال تعليق

نموذج الاتصال

Facebook SDK

Install the Demo Slide and Download Button

You might like

Post a Comment

إرسال تعليق

نموذج الاتصال