New CSS Download Buttons for Blogger

So you are looking for a cool and awesome looking download buttons for your Blogger blog. If yes, then you are at correct place. Many of you were looking for the button that you can add in your demo and download link but not able to made it by yourself or you may not have much time to given on creating a good looking download and demo buttons for your blog. So, to help bloggers like you I am sharing some really good looking CSS buttons. If you are a regular user of this blog than you may be familiar with the previous CSS3 Download Buttons for Blogger. In the previous CSS buttons you are provided four sets of buttons which are very easy to use and looks good as well. If you like those CSS buttons for Blogger than you will also like these two sets of download buttons too. It's very simple and built with keeping in mind about all types of browser. It's cleanly coded so that you can customize it yourself. But if you face difficulty in customizing I will be here to help you. Now read the process explained below.

See the picture given above. The button that I will provide will look something like the above image. These buttons is fully based on CSS 3. But don't worry if you think that it will not work properly in the older versions of web browsers. I have taken care about all popular browsers that are used now a days. The CSS code contains codes for two types of download buttons for blogger blogs. Both buttons are made with similar looking design but different in color. One of the button is gray in color and the another one is in blue. It's easy to use and is smaller in size so that it may not slow down your blogs' loading time. I also use these CSS buttons in my Blogger blog as these are simple and looks good as well. If you would like to use these CSS3 buttons in your Blogger blog than follow some simple steps given below to add this cool buttons.

Before you can proceed on the tutorial I would like to remind you to make a Backup of Blogger Template so that you can use this Backup template in no way out. Now after creating the Backup follow the following steps to add these CSS buttons in your Blogger blog.

• You should be signed in until now. Now after signing in go to Blogger home.
• In the homepage click on the template page from the Dashboard.
• In the template page you will see Edit HTML located just below the live preview of your Blogger blog. Click on Edit HTML.
• Now click anywhere in the code and press CTRL+F to open the Blogger search box. In the search box search for the code given below.

</head>

• Now paste the code which is given below just after the </head> tag.

<style type="text/css">
.button-ht {
-webkit-border-top-left-radius:14px;
-moz-border-radius-topleft:14px;
border-top-left-radius:14px;
-webkit-border-top-right-radius:14px;
-moz-border-radius-topright:14px;
border-top-right-radius:14px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-bottomright:14px;
border-bottom-right-radius:14px;
-webkit-border-bottom-left-radius:14px;
-moz-border-radius-bottomleft:14px;
border-bottom-left-radius:14px;
text-indent:0;
height: 28px;
line-height: 27px;
width: auto;
text-decoration: none !important;
display: inline-block;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
font-style: normal;
}
.blue-ht{
padding: 5px 5px;
margin-bottom: 2px;
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#63b8ee),color-stop(1,#468ccf));
background:-moz-linear-gradient(center top,#63b8ee 5%,#468ccf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee',endColorstr='#468ccf');
background-color:#63b8ee;
border:1px solid #3866a3;
color:#14396a;
color: #000000 !important;
text-shadow:1px 1px 0px #7cacde;
}
.blue-ht:hover{
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#468ccf),color-stop(1,#63b8ee));
background:-moz-linear-gradient(center top,#468ccf 5%,#63b8ee 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf',endColorstr='#63b8ee');
background-color:#468ccf;
text-decoration:none;
}
.blue-ht:active{
position:relative;
top:1px;
-moz-transition: all 0s ease-out;
-o-transition: all 0s ease-out;
-webkit-transition: all 0s ease-out;
-ms-transition: all 0s ease-out;
transition: all 0s ease-out;
}
.gray-ht{
padding: 5px 5px;
margin-bottom: 2px;
-moz-box-shadow:inset 0px 1px 0px 0px #c0c0c0;
-webkit-box-shadow:inset 0px 1px 0px 0px #c0c0c0;
box-shadow:inset 0px 1px 0px 0px #c0c0c0;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#f1f1f1),color-stop(1,#808080));
background:-moz-linear-gradient(center top,#f1f1f1 5%,#808080 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#808080');
background-color: #808080;
border:1px solid #c0c0c0;
color: #4F4B4B !important;
text-shadow: 1px 1px 0px #101010;
}
.gray-ht:hover{
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#808080),color-stop(1,#f1f1f1));
background:-moz-linear-gradient(center top,#808080 5%,#f1f1f1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080',endColorstr='#f1f1f1');
background-color: #808080;
text-decoration:none;
}
.gray-ht:active{
position:relative;
top:1px;
-moz-transition: all 0s ease-out;
-o-transition: all 0s ease-out;
-webkit-transition: all 0s ease-out;
-ms-transition: all 0s ease-out;
transition: all 0s ease-out;
}
</style>

• After adding the above code in the specified page you would like to see a preview of your blog to check for errors.
• If everything looks fine you can save your template by clicking save template button.

Great! We have now finished adding the most necessary CSS file in your Blogger blog. But it's not over yet. Now, I think you would also like to know how to add these CSS buttons in your post. For that you have to add a class to the link in which you want these buttons is to be shown. Don't Worry! I will explain you how to embed these buttons in your blog post. See the process explained below.

1. Just start editing or creating a new post in which want the buttons to appear.
2. Now switch to HTML mode and add the following link code in the HTML mode of your post at the place where the buttons are supposed to be shown.

<a class="button-ht gray-ht" href="#">BUTTON-TEXT</a>

Now after you have finished adding the above link code in the HTML mode of your blog post see "#" in the above code. Now replace # with the download link (or any link that you would like to convert into one of these cool CSS button). Now replace "BUTTON-TEXT" with the word or word group that you would like to show it on the button. When you will see your post than you can see an awesome gray button on that link. You know you can add two different look to your buttons. Let's say you are creating a post on Template and for that you would like two different buttons for demo and download link. Take a look at the two different buttons in image that is given on the starting of the post. To change the button style follow the following steps.

• Take a look at the link code given below carefully. It is same as the above given link code.

<a class="button-ht gray-ht" href="#">BUTTON-TEXT</a>

If you will use this code for your button than a gray button will be shown. But if you would like to change the button look to the blue one than you will only need to replace gray-ht with blue-ht in the above code. See the code given below which will create the blue button on the link.

<a class="button-ht blue-ht" href="#">BUTTON-TEXT</a>

Just add the above code by switching to the HTML mode of your blog post editor and replace # and BUTTON-TEXT according to your requirement. We have now finished adding a cool CSS button in your Blogger post.

Phew! We just learn how to embed/add buttons (download buttons) in a Blogger blog. If you have followed the above steps carefully you should have got these CSS buttons working in your post. If you need any help than feel free to ask me.