Hello Folks,Today we are here with another stunning Sliding Demo and Download Buttons For your template.In previous post we have talked about How to Add CSS Demo and Download Button With Hover Effect.We have added font awesome icons in buttons to look more beautiful and also suits your blog niche.We have used pure CSS for buttons,you can change the color and font awesome icon on these slide demo and download buttons.However you guys are using another type of buttons with image source etc but these buttons are very unique and load very fast with your page speed.So to grab these Demo and Download Buttons follow the steps mentioned below.
Demo
How to Embed Sliding Demo and Download Buttons In Blogger Template
installation steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
Step 5. Now Search for <head> by Pressing Ctrl+F keys.
Step 6.Copy the below Font Awesome Icons stylesheet and paste it just before the <head> tag.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Demo and Download Buttons by www.BloggersStanD.com */
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.bsd-btn-slide, .bsd-btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #00CC00;
margin: 10px;
transition: .5s;
}
.bsd-btn-slide2 {
border: 2px solid #FF3300;
}
.bsd-btn-slide:hover {
background-color: #00CC00;
}
.bsd-btn-slide2:hover {
background-color: #FF3300;
}
.bsd-btn-slide:hover span.circle, .bsd-btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #00CC00;
}
.bsd-btn-slide2:hover span.circle2 {
color: #FF3300;
}
.bsd-btn-slide:hover span.title, .bsd-btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.bsd-btn-slide:hover span.title-hover, .bsd-btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.bsd-btn-slide span.circle, .bsd-btn-slide2 span.circle2 {
display: block;
background-color: #00CC00;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.bsd-btn-slide2 span.circle2 {
background-color: #FF3300;
}
.bsd-btn-slide span.title,
.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title2,
.bsd-btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #FF3300;
transition: .5s;
}
.bsd-btn-slide2 span.title2,
.bsd-btn-slide2 span.title-hover2 {
color: #00CC00;
left: 80px;
}
.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
color: #fff;
}
Customization:
- To change the background color,font awesome icon color and title text color of the demo and download buttons ,change the above all highlighted hex color code values with your desired color and match with your blog or website colors.you can choose colors from here.Color wheel picker and color code generator.
Step 6.Copy the below Font Awesome Icons stylesheet and paste it just before the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Step 7. Now Save your template.
Note: If your Blogger template already have font awesome stylesheet the you can skip the step 5 and 6.
How to insert Demo and download buttons inside post editor
whenever you create a new post,just click on HTML tab near compose button in your post editor and choose you place where you want to display these slide buttons in your blogger just copy the code from the below and paste in your template.
<div id="wrap">
<a href="www.bloggersstand.com" class="bsd-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="www.bloggersstand.com" class="bsd-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>
Customization:
- Just replace the www.bloggersstand.com with your desired demo or download item link.