Cool Live Demo And Download Buttons With Hover Effect And Customizations For Blogger

I think almost everybody has seen some awesome live demo or download buttons on various blogs/websites, especially in the blogs that provide some templates or tools for the webmasters. We can normally provide preview or download link using HTML but if you want to add some stylish flavor in your blog then you can use these buttons.

In this post, i will provide you live demo and download buttons in three colors mainly, blue, green, and orange with three sizes big, medium and small. Also in this post i will show you how to add these buttons to blogger.

To see the hover effect please move your mouse over these buttons:

Live Demo  Download

Live Demo  Download

Live Demo  Download
Following are the steps to add these buttons to blogger:

• Log in to your Blogger Account.
• Go to Dashboard >> Template >> Edit HTML.
• Then search the following code:

]]></b:skin>

• Now paste the below code just above it and save the template.

Code:

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzu8VGnV_l96h_uBMDTVGGqJe7mu5xltxMipMXjbc6ctF0NZCsrWOFYhiVUnde9eK_Lg-36tDxP-xFRL5TiFzCuCqx1N2FrFH9xqh5anyCREhNfRKrMni_K_f_FiP-9UHeTHdeyGS1E34/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

• Now Go to your post page and in HTML section, paste the below code wherever you want these buttons to appear in your post.

<a class="button big blue" href="YOUR DEMO LINK" target="_blank">Live Demo</a>&nbsp;&nbsp;<a class="button big blue" href="YOUR DOWNLOAD LINK" rel="nofollow" target="_blank">Download</a>  

Customizations:

• Replace the YOUR DEMO/DOWNLOAD LINK with your demo and download links/URl.
• Replace the text "blue" with "green" or "orange" as per your requirement to change the button color.
• Replace the text "big" with "medium" or "small" to change the buttons size. 
• Replace the button name (Live Demo or Download) shown in green with your own button name.

That's all, i hope you will like these buttons.

Also read:

• Code box for Blogger with customizations
• Sitemap page generator widget for Blogger (Recommended)