Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Demo And Download Button For Blogger. Beautifully Designed Button

Demo and download button for a blogger is really important to show your work demo or give the download link to your user. The buy now button will be helpful for affiliate marketers to show buy now affiliate links for sales.

Any type of button is really important to any blogger blog to make their blog design well looking and stunning.

We have created a beautiful design and very stunning demo and download buttons for your blogger blog.

This button is entirely beautiful and stunning with sliding hover.

demo and download button for blogger blog

Demo and Download Button For Blogger.

This button is very attractive and responsive with beautiful colors. these are very unique and user-friendly buttons.

These buttons for blogger included Demo, Download and Buy now button. And these buttons are built with bootstrap font-awesome.

Here is demo Image:

                                                                    Screenshot

Demo And Download Button For Blogger

You can check the live preview of this button from here: 

Live Preview

How to Install This Amazing Button to Your Blogger Theme.

Adding CSS.

  • Go to Blogger Dashboard>>Theme>>Edit HTML, Now Search For ]]> With the help of CTRL+F
  • Now Copy The CSS coding given in below boxes, and paste the CSS coding Above the ]]> Click Save Template.
  • Note: Sometimes it does not work if you paste your code just above the ]]> because of your template settings. If your template does not work, then search for .post-body CSS and paste it there.  But mostly it works so first try to add this CSS in before ]]>

Here is your CSS:

/* Starting Css To DEMO & Download Button By Bloggingegg.com */
#m-wrap {
margin: 10px auto;
text-align: center;
}
#m-wrap br {
display: none;
}
.egg-btn-slide, .egg-btn-slide2, .egg-btn-slide3 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 0px;
background: #fdfdfd;
border: 2px solid #009688;
margin: 10px;
transition: .5s;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.egg-btn-slide2 {
border: 2px solid #8BC34A;
}
.egg-btn-slide3 {
border: 2px solid #f73d00;
}
.egg-btn-slide:hover {
background-color: #009688;
}
.egg-btn-slide2:hover {
background-color: #8BC34A;
}
.egg-btn-slide3:hover {
background-color: #f73d00;
}
.egg-btn-slide:hover span.circle, .egg-btn-slide2:hover span.circle2, .egg-btn-slide3:hover span.circle3 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
}
.egg-btn-slide:hover span.circle{
color: #009688;

}
.egg-btn-slide2:hover span.circle2 {
color: #8BC34A;
}
.egg-btn-slide3:hover span.circle3 {
color: #f73d00;
}
.egg-btn-slide:hover span.title, .egg-btn-slide2:hover span.title2, .egg-btn-slide3:hover span.title3 {
left: 40px;
opacity: 0;
}
.egg-btn-slide:hover span.title-hover, .egg-btn-slide2:hover span.title-hover2, .egg-btn-slide3:hover span.title-hover3 {
opacity: 1;
left: 40px;
}
.egg-btn-slide span.circle, .egg-btn-slide2 span.circle2, .egg-btn-slide3 span.circle3 {
display: block;
background-color: #009688;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.egg-btn-slide2 span.circle2 {
background-color: #8BC34A;
}
.egg-btn-slide3 span.circle3 {
background-color: #f73d00;
}
.egg-btn-slide span.title,
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2,
.egg-btn-slide3 span.title3, .egg-btn-slide3 span.title-hover3 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #009688;
transition: .5s;
}
.egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2 {
color: #8BC34A;
left: 80px;
}
.egg-btn-slide3 span.title3,
.egg-btn-slide3 span.title-hover3 {
color: #f73d00;
left: 80px;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
left: 80px;
opacity: 0;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
color: #fff;
}
/* Ending Css To DEMO & Download Button By Bloggingegg.com */

Add HTML To Your Post Where You Want To Show These Buttons.

Once you install the CSS in your blogger template, now time to add this HTML piece of code to your blogger post editor. 

Now Copy the HTML coding given below in boxes, and paste this in post HTML Tab.

Here is the HTML Code:


class=”egg-btn-slide” href=”#” target=”_blank”>

Demo
View Now

class=”egg-btn-slide2″ href=”#” target=”_blank”>

Download
Download Now

class=”egg-btn-slide3″ href=”#” target=”_blank”>

Buy Now
Purchase Now


Go to any blog post editor of the blogger and Just paste this code anywhere you want to display the buttons. 

Deleting of an unused button:

If you want to remove any one of these buttons, then remove it from this HTML. For example, you want to remove buy now button. Then you need to select from class=egg-btn-slide3″ to the ending of

Hope You Like This Demo And Download Button For Blogger.

If you really like our work, Then please don’t forget to share this tutorial with your social media following with the help of below social buttons. Do you have any issue or question then feel free to ask me in the comment section. Thanks

The post Demo And Download Button For Blogger. Beautifully Designed Button appeared first on Blogging Egg.



This post first appeared on WPBloggerTricks, please read the originial post: here

Share the post

Demo And Download Button For Blogger. Beautifully Designed Button

×

Subscribe to Wpbloggertricks

Get updates delivered right to your inbox!

Thank you for your subscription

×