Hello Folks,Today nosotros are hither amongst or too thence other stunning Sliding Demo too Download Buttons For your template.In previous post service nosotros bring talked well-nigh How to Add CSS Demo too Download Button With Hover Effect.We bring added font awesome icons inwards buttons to expect to a greater extent than beautiful too likewise suits your weblog niche.We bring used pure CSS for buttons,you tin alter the color too font awesome icon on these slide exhibit too download buttons.However you lot guys are using or too thence other type of buttons amongst icon root etc but these buttons are really unique too charge really fast amongst your page speed.So to view these Demo too Download Buttons follow the steps mentioned below.
Demo
How to Embed Sliding Demo too Download Buttons In Blogger Template
installation steps:
Step 1. Log inwards to your Blogger trace of piece of occupation organization human relationship too 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 too glue it but earlier 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 too glue it but earlier 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 too glue it but earlier the ]]></b:skin> or </style> tag.
/* Demo too Download Buttons yesteryear 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 corporation #00CC00;
margin: 10px;
transition: .5s;
}
.bsd-btn-slide2 {
border: 2px corporation #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 alter the background color,font awesome icon color too title text color of the exhibit too download buttons ,change the to a higher house all highlighted hex color code values amongst your desired color too fit amongst your weblog or website colors.you tin conduct colors from here.Color bicycle picker too color code generator.
Step 6.Copy the below Font Awesome Icons stylesheet too glue it but earlier 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 bring font awesome stylesheet the you lot tin skip the pace v too 6.
How to insert Demo too download buttons within post service editor
whenever you lot practise a novel post,just click on HTML tab nigh compose push inwards your post service editor too conduct you lot house where you lot wishing to display these slide buttons inwards your blogger but re-create the code from the below too glue inwards 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 supplant the www.bloggersstand.com amongst your desired exhibit or download special link.
No comments:
Post a Comment