Classifieds|Blogger Tips|SEO: Add Awesome Demo And Download Button With Mouse Hover Effects

This post is for all readers and visitors who look out for stylish demo and download buttons for their blogs.Many people owns blogs that provides free templates and other useful tutorials and there are many sites providing free downloads.Providing demo and download link is very essential in those sites.If those links are manipulated with cool css style it will be more effective.This article proviedes simple methods to create cool and stylish demo and download buttons for blogger blogs.Make your demo and download links more attractive and interesting by adding following codes.

You can find the demo below.Move your cursor on the button for hover effects:

Live Demo Download

1, Go To Blogger - Design- Edit HTML

2, Backup your template

3, Click the "Expand Widgets Template" box

4, Search for this,

]]></b:skin>

Below that paste the following 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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8qTxgoNRH63oLkmcsxAwgbHYQzXZZJy4sdQy_UcfjnfFDwQg8ybSfe3GRkRyr9qtz3rPy8xAGIdoni6VX39rBaVo1YJI2V2ctz0qPhD2nckh1f-k2zTiEHiP2torOzqXTeg8028cvQfGM/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));
}

Save your template.

Now add the below code wherever the Demo and Download Link to appear in you posts

<a class="button big blue" href=" http://www.blogger.com/YOUR%20DEMO%20URL%20HERE " target="_blank">Live Demo</a>  <a class="button big blue" href="http://www.blogger.com/YOUR%20DOWNLOAD%20URL%20HERE" rel="nofollow" target="_blank">Download</a>

Replace http://www.blogger.com/YOUR%20DEMO%20URL%20HERE with your DEMO LINK

Replace http://www.blogger.com/YOUR%20DOWNLOAD%20URL%20HERE with your DOWNLOAD LINK

By default the demo and download buttons will be in Blue colour.It can be changed to orange colour and green colour by simplying replacing blue by green for green colour button and orange for orange colour buttons.

Tags: no reciprocal link directories,new classifieds list 2012,instant no registration classified 2012,dofollow classifieds,,instant approval directories 2012,,USA classifieds list,UKclassifieds list,cgi and non cgi classifieds.

25. 26. Add Awesome Demo And Download Button With Mouse Hover Effects 27. 28.