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 Get Unlimited Ammo and Health in IGI 2

After many days I am sharing a cool and interesting trick for game lovers. Do you enjoy playing IGI2? Of course you like this game. But many of you may be facing verious difficult situations in completing this game. It's because the missions are really tough and you can't complete whole IGI 2 without using it's cheat codes. There are many hacking tricks for IGI available in the Internet but most of them don't work. And this is the reason I am sharing these cheat codes to you. After reading this post you will be able to play this game without losing any health and ammo. We'll use a lite application to achieve the immortality and infinite number of ammo in this game. You will have to download the software from the link that I will provide you a little later in this post. Let's first know what this software will do. It will allow you to keep your health unlimited in IGI game. And if the health will not decrease then you will never die in the game IGI. You wil...
10 comments
Read more

Enhancing Productivity with Virtual Desktops in Windows 11

In the fast-paced digital age, multitasking has become an essential skill for maximizing productivity. With the release of Windows 11, Microsoft introduces an enhanced Virtual Desktop feature that empowers users to organize their workspace, manage tasks efficiently, and seamlessly switch between different contexts without the clutter. In this article, we'll delve into the world of Virtual Desktops in Windows 11 and explore how this powerful tool can elevate your productivity to new heights. Task View  The Power of Virtual Desktops Virtual Desktops in Windows 11 provide users with a dynamic way to manage their open applications and tasks. Think of them as separate workspaces, each with its own set of open apps, files, and windows. This allows you to group related activities together, effectively creating a focused environment for different projects, tasks, or workflows. Getting Started with Virtual Desktops Setting up and using Virtual Desktops in Windows 11 is a breeze: 1. Creating...
Post a Comment
Read more