Skip to main content

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.

CSS3 Download Buttons for Blogger Blogs

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.
Labels:

Comments

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

How to Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...
Post a Comment
Read more

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...
Post a Comment
Read more