Beautiful Live Demo & Download Button With Pure CSS Hover Effect

Amazing, stylish and beautiful download button & live demo button for your blogger blog. Toady I'm gonna share two beautiful button collection for your blogger blog, that I'm also using in this blog too.

Why this button:

What we don't do to make our blog look something like professional. We always want to catch our visitor's attention via our blog's beauty and uniqueness. So, this button will really looks beautiful and enhance your blog beauty.

Must See: PR 0-8 Instant Approval Directory Lists of 2015.

And when comparing with others the main fact of this buttons is; this button don't use any external script or css stylesheet. That means it will not make any effect on your blog loading time.

Live Demo:

You already can see the animated picture of the button above. But after that you actually want to see the original version of this button see below.
Download Live Demo

How to integrate the CSS:

Adding this beautiful buttons with amazing hover effect is really so much easier. You just need to add the CSS code in your template just for one time. Next time you only have to call the CSS effect with a div class.

Step 1: Login to your blogger account, select your blog and click on Template from blogger menu and after that click on Edit HTML

Note: Always take a backup copy of your blogger template before proceed to editing.

Step 2: Now search for ]]> and just above it paste the below CSS code.

/*---download button by blogspotyard.com css start---*/
.button {-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);background:url("#") repeat-x scroll 0 0 #252424;border-bottom:1px solid rgba(0, 0, 0, 0.25);color:#FFFFFF !important;cursor:pointer;font-weight:bold;line-height:1;overflow:visible;font-size:17px;padding:8px 19px 9px;position:relative;text-decoration:none;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);width:auto;}.by-demobutton {background-color:#222222;text-align:center;width:150px;}.by-demobutton:hover {background-color:#00A0EE;}.by-downloadbutton {background-color:#bcf50b;text-align:center;width:150px;}.by-downloadbutton:hover {background-color:#00AC00;}.button:hover {-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}
/*---download button by blogspotyard.com css end---*/

Step 3: Time to hit the Save Template button.

How to add button in post:

Adding button in your desire post don't means a hard job. Follow the below steps.

Step 1: In your post editor click on HTML tab.

Step 2: Paste the below HTML code in your post's desire section.

For Download button use the code below:

YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: right;" target="_blank">Download

For Live-Demo button use the code below:

YOUR DEMO LINK HERE" rel="nofollow" style="float: right;" target="_blank">Live Demo

Step 3: Finally publish your blog post and see the magic in live preview.

Customization:

Replace RED color marked text with your link, that you want to cover with the button.
Replate GREEN color marked text with what you want to show on button.
Replace PINK color marked option with left, right and center; in which side you want to float the button.

Request:

Look friends, this is my new blog about blogging and SEO. Here I’m sharing blogger tricks, templates, widgets and SEO tricks. In every post of this blog I tried my best to make the post better understanding with maximum screenshot. So I hope that you will find every post of this blog very friendly. So my request is, if this blog really helped you a little please consider 10 seconds to share this post in your social profile.
Thanks for landing here.