How to Add a Stylish Download Button Link on Blogger and Website ?

As we all know that, Blogger is the well known and mostly used blogging platform among all the Blogging platform. Nowadays We can see the all popular Blogger blog is customized with responsively, so that visitors can be easily attracted to the sites.

Stylish Button Link also is the most important to make blog responsive.

Here I am providing most attractive CSS button links for your website or a blogger blog. If you provide free stuff to download, you can use these button links in your blogger blog or website.

How to add Stylish Download Button Links

1. Login to your Blogger Dashboard

2. Go to Template Section

3. Click on Backup/Restore (Always backup your template before making any changes)

4. Now Edit Html and click anywhere at HTML section and press Ctrl+f to find,

]]></b:skin>

5. Now just before or above the ]]></b:skin> Paste the Below code.

/***FIRST STYLE THE BUTTON***/

input#bigbutton {

width:500px;

background: #3e9cbf; /*the colour of the button*/

padding: 8px 14px 10px; /*apply some padding inside the button*/

border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/

cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/

/*style the text*/

font-size:1.5em;

font-family:Oswald, sans-serif; /*Oswald is available from http://www.google.com/webfonts/specimen/Oswald*/

letter-spacing:.1em;

text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/

color: #fff;

/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/

-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;

-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;

box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;

/*give the corners a small curve*/

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

6. Save the template.
7. Now Copy this code everytime where you want to put Stylish Button Link on your post and save or publish the post and check the post.

<a href="donwload-link" target="_blank"><input id="gobutton" type="submit" value="Download" /></a>

Now you are done.

Note:-

• Change download-link with your original download link.