CSS3 Download Buttons for Blogger Blogs

You should be familiar with some of the cool free Blogger Templates which are available in large numbers. But something bad on some or most of the Blogger Templates is that they don't provide a way to add a cool button into your Blogger post. There are some good CSS3 buttons available that you can add in your post. And something good about these CSS3 buttons is that it looks good and can be easily customized. In most chances you don't get download buttons that can fit your Blogger Template. Therefore I will provide you four buttons for your Blogger that can be easily customized. All you have to do is to embed the CSS code in your Blogger Template and start adding buttons next time you will post.

At first I started these buttons based on CSS3 but something bad about CSS3 is that it may not work properly in older versions of web browsers. So, I tried to create some cool buttons that will work on almost all types of browsers that users use now a days. I have tested it working well on Google Chrome, Internet Safari and Firefox. And I think it will work quite well in Internet Explorer. These Css buttons for Blogger contains number of effects. As you ca see in the above picture that the buttons (or download buttons) offers different effects on normal, hover and active (on click). Now let's see how to add these cool and free buttons on your Blogger blog.
Before you can go to the tutorial further I would like to remind you to make a Backup of Blogger Template. It's necessary to always have a Backup of Template so that you can use that in no way out. Now follow following steps to add cool buttons (or download buttons) in your Blogger blog.

• You should have signed in to your Blogger Account. If not sign in now.
• Now you will need to navigate to Template page from the Dashboard. In the Template page of Blogger click on Edit HTML which is just below the live preview of your Blog.
• In the source page of your Blogger Template search for the following head tag.

</head>

• After finding the above closing head tag (</head>) you will have to add the CSS code that is given below right above or before the "</head>" tag.

<style type="text/css">
.button {margin-bottom: 2px;}
.button.orange {
padding: 12px 12px;
background: #ec9732;
background: -moz-linear-gradient(top,  #ec9732 0%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ec9732), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top,  #ec9732 0%,#f1f1f1 100%);
background: -o-linear-gradient(top,  #ec9732 0%,#f1f1f1 100%);
background: -ms-linear-gradient(top,  #ec9732 0%,#f1f1f1 100%);
background: linear-gradient(top, #4682B4 0%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec9732', endColorstr='#f1f1f1',GradientType=0 );
-moz-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
color: #693e0a!important;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
border: solid 1px #bbb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.button.gray {
padding: 12px 12px;
background: #f4f4f4;
background: -moz-linear-gradient(top,  #c0c0c0 0%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0c0c0), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top,  #c0c0c0 0%,#f1f1f1 100%);
background: -o-linear-gradient(top,  #c0c0c0 0%,#f1f1f1 100%);
background: -ms-linear-gradient(top,  #c0c0c0 0%,#f1f1f1 100%);
background: linear-gradient(top,  #c0c0c0 0%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c0c0', endColorstr='#f1f1f1',GradientType=0 );
-moz-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
color: #808080;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
border: solid 1px #bbb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.button.blue {
padding: 12px 12px;
background: #84acc3;
background: -moz-linear-gradient(top,  #4682B4 0%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4682B4), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top,  #4682B4 0%,#f1f1f1 100%);
background: -o-linear-gradient(top,  #4682B4 0%,#f1f1f1 100%);
background: -ms-linear-gradient(top,  #4682B4 0%,#f1f1f1 100%);
background: linear-gradient(top, #4682B4 0%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4682B4', endColorstr='#f1f1f1',GradientType=0 );
-moz-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
color: #4682B4;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
border: solid 1px #bbb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.button.small {
font-size: 12px;
}
.button.medium {
font-size: 14px;
}
.button.large {
font-size: 16px;
}
.button:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.button.gray:hover {
color: #808080 !important;
background: -moz-linear-gradient(top,  #f1f1f1 0%, #c0c0c0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#c0c0c0));
background: -webkit-linear-gradient(top,  #f1f1f1 0%,#c0c0c0 100%);
background: -o-linear-gradient(top,  #f1f1f1 0%,#c0c0c0 100%);
background: -ms-linear-gradient(top,  #f1f1f1 0%,#c0c0c0 100%);
background: linear-gradient(top,  #f1f1f1 0%,#c0c0c0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#c0c0c0',GradientType=0 );
}
.button.orange:hover {
background-color: #ec9732;
background: -moz-linear-gradient(top,  #f1f1f1 0%, #ec9732 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#ec9732));
background: -webkit-linear-gradient(top,  #f1f1f1 0%,#ec9732 100%);
background: -o-linear-gradient(top,  #f1f1f1 0%,#ec9732 100%);
background: -ms-linear-gradient(top,  #f1f1f1 0%,#ec9732 100%);
background: linear-gradient(top,  #f1f1f1 0%,#ec9732 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ec9732',GradientType=0 );
-moz-box-shadow: 0 2px 0 #bea280!important;
-webkit-box-shadow:0 2px 5px #bea280;
box-shadow: 0 1px 2px #bea280;
border-color: #bea280 !important;
}
.button.blue:hover {
color: #000080;
border-color: #84acc3;
background: -moz-linear-gradient(top,  #f1f1f1 0%, #4682B4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#4682B4));
background: -webkit-linear-gradient(top,  #f1f1f1 0%,#4682B4 100%);
background: -o-linear-gradient(top,  #f1f1f1 0%,#4682B4 100%);
background: -ms-linear-gradient(top,  #f1f1f1 0%,#4682B4 100%);
background: linear-gradient(top,  #f1f1f1 0%,#4682B4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#4682B4',GradientType=0 );
}
.button.orange:active {
outline: 0;
border-color: #bea280;
-moz-box-shadow: 0 2px 4px 1px #bea280 inset;
-webkit-box-shadow: 0 2px 4px 1px #bea280 inset;
box-shadow: 0 2px 4px  1px #bea280 inset;
}
.button.gray:active {
outline: 0;
color: #333 !important;
border-color: #aaa;
-moz-box-shadow: 0 2px 4px 1px #bbb inset;
-webkit-box-shadow: 0 2px 4px 1px #bbb inset;
box-shadow: 0 2px 4px  1px#bbb inset;
}
.button.blue:active {
outline: 0;
border-color: #84acc3;
-moz-box-shadow: 0 2px 4px 1px #87CEFA inset;
-webkit-box-shadow: 0 2px 4px 1px #87CEFA inset;
box-shadow: 0 2px 4px 1px #87CEFA inset;
}
.button.green {
border: 1px solid #96a37b!important;
color: #345903!important;
background-color: #79be1e;
padding: 12px 12px;
background: -moz-linear-gradient(top,  #79be1e 0%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top,  #79be1e 0%,#f1f1f1 100%);
background: -o-linear-gradient(top,  #79be1e 0%,#f1f1f1 100%);
background: -ms-linear-gradient(top,  #79be1e 0%,#f1f1f1 100%);
background: linear-gradient(top,  #79be1e 0%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79be1e', endColorstr='#f1f1f1',GradientType=0 );
-moz-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
color: #808080;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
border: solid 1px #bbb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.button.green:hover {
background-color: #89d228;
background: -moz-linear-gradient(top,  #f1f1f1 0%, #89d228 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#89d228));
background: -webkit-linear-gradient(top,  #f1f1f1 0%,#89d228 100%);
background: -o-linear-gradient(top,  #f1f1f1 0%,#89d228 100%);
background: -ms-linear-gradient(top,  #f1f1f1 0%,#89d228 100%);
background: linear-gradient(top,  #f1f1f1 0%,#89d228 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#89d228',GradientType=0 );
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.button.green:active {
outline: 0;
border-color: #89d228;
-moz-box-shadow: 0 2px 4px 1px #89d228 inset;
-webkit-box-shadow: 0 2px 4px 1px #89d228 inset;
box-shadow: 0 2px 4px 1px #89d228 inset;
}
</style>

• Now after adding the above CSS code at the right place quickly preview or Template.
• Save the Template by clicking orange save template button.

That's All! We have just finished adding the CSS in your Blogger Template. Now you would like to know how to embed these buttons in your post. It's simple to embed these in the post. Just follow the below given simple steps.

1. Start writing or editing your post in which you want to add download buttons (or simple a button).
2. Now switch to HTML mode of the post editor and paste/add the following at the place in which you want it to appear.

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

After adding the above code in the HTML mode of the post editor you will have replace # from the above given code with the link which you want to add. Replace BUTTON-TEXT with the text or word which you want to make it appear on the button. Also, you can give the button (or download button) four different looks. You can take a look at the four different types of buttons in the image given above on starting of this post. To change the look just replace button small gray in the above given code with the class or id given below.

1. Replace with 'button small blue' for giving blue button color, 'button small orange' for orange color button, 'button small green' for green colored button.
2. You know you can change the size of the CSS buttons too. To change the size of the buttons you will only need to replace small in the above code with medium or large. You can apply this to all the four different types of buttons.
3. Lets say you want a medium size button which will be in green color than just change the code as given below.

<a class="button medium green" href="#">BUTTON-TEXT</a>

Great! We have finished adding some cool CSS3 buttons in our Blogger blog. I wish you have liked these download buttons. If you liked these than you would also like to share these to your friends by using the below sharing icons. If you need any help than feel free to ask me.