2 Awesome CSS Demo Download Buttons For Blogger

If you have something to demonstrate on your blog and want your blog visitors to download then you must consider adding Demo - Download Buttons For Blogger Blog.

CSS3 Buttons look attractive and it attracts your blog visitors to click on those buttons. Instead of using some ugly anchor links, it's always recommended to use attractive CSS Buttons with beautiful Font Awesome Icons and mouse hover effect.

Theses buttons are made of pure CSS and don't affect the loading time of your blog anyhow. Recently I have shared a script to add smooth scrolling to blogger blogs. To give your users a great scrolling experience, don't miss it.

In this post, I have a variety of demo and download CSS buttons for blogspot blogs. By following the below steps you can add some elegant looking buttons with super cool hover effects as well.

How to Add Demo Download Buttons to Blogger

Let's Start. Add Some Awesomeness to Your Posts.

Add Font Awesome Icons to Your Blogger Blog!

To show icons with the buttons, It is must to add Font Awesome Icons to your blog. It's a minimal script and don;t affect your blog's page speed time much. Follow the steps to add it.

Generally, all custom templates already have this font awesome icon script installed so avoid this process to add it multiple times. To check whether it's available or not in the template, search for /font-awesome/ in the HTML box and it will highlight that script.

Log in to your blogger dashboard and Click on Template > Edit HTML

Now search for </head> or <head/> tag and just above it, paste the below script code. 

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Now, Click on Save Template and That's All. Font Awesome is now added to your blog. So, Let's proceed to next steps of adding demo - download buttons to blogger.

Don't Miss  How to Make Blogger Load Faster

How to Add Demo - Download Buttons to Blogger?

Warning

Please Take a Backup of Your Blogger Template Before Proceeding to the Steps.

• Boring Steps Again ( :p ). Log in to your blogger Dashboard,
• Click on Template > Edit HTML.
• Now, click anywhere in the HTML area and search for ]]></b:skin> tag.
• Just above the ]]></b:skin> tag, paste the below CSS.

Style #1.

.button{list-style:none;text-align:center;margin:10px!important;padding:2px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover,.download:hover {background-color:#36424a;color:#fff;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

To make these button suitable to your template color, you can modify the below HTML color codes.

• #3498DB - Demo Button Background 
• #1ABC84 - Download Button Background

Style #2.

.button{list-style:none;text-align:center;border:0;margin:10px;padding:2px;font-size:14px;clear:both;text-decoration:none;color:#fff}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:10px 15px!important;color:#fff!important;font-weight:400;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;border-radius:2px;border:1px solid #209bbd;letter-spacing:1px;transition:background-color .2s ease-out}
.demo,.download {background-color:#26a8cc;}
.demo:hover,.download:hover {background-color:#fff;color:#26a8cc!important;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transform:rotate(0deg);transition:rotate .2s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transform:rotate(0deg);transition:rotate .2s ease-out;}
.demo:hover:before,.download:hover:before{transform:rotate(360deg);}

• Now, Click on Save Template & You are done with 90% job.

You have added the CSS of demo download buttons and now it;s turn to add them in posts. Let's proceed,

How to Add these Buttons in Posts?
 

• Go to Edit Post Section or Create a new Post.
• In the post editor, switch to HTML view and below HTML codes according to your CSS styles 1 & 2.

HTML For Style #1

<div style="text-align: center;"><ul class="button"><li><a class="demo" href="http://www.domain.com/">DEMO</a></li>
<li><a class="download" href="http:/www.domain.com/">DOWNLOAD</a></li>
</ul></div><div class="clear"></div><br />

HTML For Style #2

<div style="text-align: center;"><ul class="button"><li><a class="demo" href="http://www.domain.com/">DEMO</a></li>
<li><a class="download" href="http://www.domain.com/">DOWNLOAD</a></li>
</ul></div><div class="clear"></div><br />

Now, publish your post or view the preview before publishing. You can see the CSS buttons live there.

Let me know if you are facing any issues with the implementation or usage of these Demo Download buttons. I will try my best to assist you in comments. You can check these fast loading blogger templates if you are still looking for good one.