8/05/2012

Stylish Animated Live Demo and Download Buttons

04:59 Posted by https://cooldoodtricks.blogspot.com/ Filed Under :
Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

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 provides 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.



  • Go To Blogger - Design- Edit HTML
  • Backup your template
  • Click the "Expand Widgets Template" box
  • 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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1y-CGIokpmbgCCpRbisthbIiv0wv9woJlTTtnD63iQ08aa7r_I6cQowCRw-xVe2LaXmvYUGymqh0yC7Q8WuhN3jPinBVpVQB8tbQ_Bgf4ce7dwAijbUdWsevKll1o-PBIHNxV0mHQ_Km/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 Live Demo and Download Link to appear in you posts
Live Demo Button Code:

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

Download Button Code:

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


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter

About Author
Hello Friends..... I am Sarath S Pillai, currently living in Kerala, India. A Web Design Consultant, Professional Blogger, Print media Graphic Designer and an addicted Web Developer. If you have any question or feedback please comment below. Happy Blogging...

0 comments:

Click Here To Add Your Comment

Confused? Feel Free to Ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note: Please do not spam. Spam comments will be deleted immediately upon our review.

Regards,
Sarath S Pillai

Cool Dood Tricks

 

About The Author

Hi! I am Sarath S Pillai, currently live in Kerala, India. A young Web Designer, Pro Blogger, Print Media Graphic Designer & an addicted Web Developer. Read More...

Subscribe Us

→     Receive updates via email

→     Subscribe to our RSS feed

→     Join us on Facebook

→     Circle us on Google+

→     Follow us on Twitter

Powered by:     

| Cool Dood Tricks © 2012. All Rights Reserved | | Contact | Home | Maintained by: Sarath |