Home Blogger Tips Add Stylish Download Button link in Blogger and Website

Blogger Tips

Add Stylish Download Button link in Blogger and Website

August 10, 2014

5428

Blogger as we all know, is the most used blogging platform among all the platforms. You may find every type of blogger in the blogosphere. Every one these days is looking to customize its blog to make it look more attractive and get a good conversion rate. To make it happen, I have provided a lot of blogger tips on Technoratan. 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 download Button link in your blogger blog or website.

If you feel like switching to WordPress, you can also get some wordpress tips here.

Below are five stylish button links that can be used as download buttons, buy now buttons or in any way you want. Besides this, you also try using some other blogger widgets to make your blog look more stylish. You can also add metro style social sharing widget or automatic numbering popular posts widget in your blogger blog.

How to add Stylish Download Button Links

Login to your Blogger Dashboard
Go to Template Section
Click on Backup/Restore (Always backup your template before making any changes)
Click on Edit Html
Click anywhere in the HTML section and press CTRL + F
Find

</b:skin>

Just before it paste any of the below 5 CSS codes
Save and Exit
If you want to add all CSS in your Blogger template and use different button links for different posts, you can add all different CSS in your blogger template before the below code.

</b:skin>

In the Post section, click on edit post or create a new post
Click on HTML
A code like this is written above every CSS, use that code to display that Button link

<a class="buttonclass" href="#">Download Now</a>

Save your Post and check in your browser.

Also Read – How to Write a blog
Also Read – How to Write SEO Optimized Article

HTML

<a class="btnlink" href="#">Your Text Here</a>

CSS

.btnlink {
 -moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
 -webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
 box-shadow:inset 0px 1px 0px 0px #7a8eb9;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
 background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
 background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
 background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
 background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
 background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
 background-color:#637aad;
 border:1px solid #314179;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
 font-size:13px;
 font-weight:bold;
 padding:6px 12px;
 text-decoration:none;
}
.btnlink:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
 background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
 background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
 background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
 background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
 background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);
 background-color:#5972a7;
}

Also Read – Facebook Popup Widget to increase Facebook likes
Also Read – Facebook Floating Like Box

HTML

<a class="btnlink1" href="#">Your Text Here</a>

CSS

.btnlink1 {
 -moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
 -webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
 box-shadow:inset 0px 1px 0px 0px #3dc21b;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
 background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);
 background-color:#44c767;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #18ab29;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:10px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #2f6627;
 }
.btnlink1:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
 background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
 background-color:#5cbf2a;
 }
.btnlink1:active {
 position:relative;
 top:1px;
 }

HTML

<a class="btnlink2" href="#">Your Text Here</a>

CSS

.btnlink2 {
-moz-box-shadow: 0px 1px 0px 0px #fff6af;
-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
box-shadow: 0px 1px 0px 0px #fff6af;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1,
#ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64',
endColorstr='#ffab23',GradientType=0);
background-color:#ffec64;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.btnlink2:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1,
#ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23',
endColorstr='#ffec64',GradientType=0);
background-color:#ffab23;
}
.btnlink2:active {
position:relative;
top:1px;
}

Also Read – Add Vertical Sharing Widget like DigDig in blogger
Also Read – Freeze Blogger widgets or make sticky widgets

HTML

<a class="btnlink3" href="#">Your Text Here</a>

CSS

.btnlink3 {
-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
box-shadow: 3px 4px 0px 0px #8a2a21;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1,
#f24437));
background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f',
endColorstr='#f24437',GradientType=0);
background-color:#c62d1f;
-moz-border-radius:18px;
-webkit-border-radius:18px;
border-radius:18px;
border:1px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:7px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
.btnlink3:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1,
#c62d1f));
background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437',
endColorstr='#c62d1f',GradientType=0);
background-color:#f24437;
}
.btnlink3:active {
position:relative;
top:1px;
}

HTML

<a class="btnlink4" href="#">Your Text Here</a>

CSS

.btnlink4 {
-moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
-webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
box-shadow:inset 0px 1px 0px 0px #f9eca0;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1,
#f2ab1e));
background:-moz-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background:-webkit-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background:-o-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background:-ms-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background:linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911',
endColorstr='#f2ab1e',GradientType=0);
background-color:#f0c911;
-moz-border-radius:42px;
-webkit-border-radius:42px;
border-radius:42px;
border:1px solid #e65f44;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:20px;
font-weight:bold;
padding:8px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #ded17c;
}
.btnlink4:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1,
#f0c911));
background:-moz-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:-webkit-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:-o-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:-ms-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e',
endColorstr='#f0c911',GradientType=0);
background-color:#f2ab1e;
}
.btnlink4:active {
position:relative;
top:1px;
}

These 5 download button link codes will help you make the best conversions and optimize your blog to give a professional look. If you want to create your own button link, you may visit CSS Button Generator and create your own.

Tell me how did you find this article in the comment section below, if you have any query regarding the implementation of codes, you may feel free to ask.

1 COMMENT

Add Adsense Between Post in Blogger | Increase CTR August 9, 2017 at 16:12

[…] This way, not only you can increase CTR (Click Through Rate) on your adsense ads. You may also optimize your blogger like professional and attract your readers to stay for a long time on your blog. Let me now come to the topic now. […]