-->

Thursday, 6 June 2013

3 Add Animated Css Buttons On Blogger

The Css Buttons Is Attractive For Viewers Because It's Very Beautiful And Very Stylish.SO Today I am Gonna Show You How To Add Animated CSS Buttons On Blogger.SO Follow My Steps


1-> Open Your Blogger Account

2-> Click On Template And Click On Edit HTML

3-> Now Find The Following Code (Find The Code Press CTRL+F)

]]><b:skin>

4-> After Finding This Code Paste The Below Code Before  ]]><b:skin>


.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 18px;
}

.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDChYmCAtLP8fGWsqdeRQtWaVkeAFIUSKidtzmcwvtK43FthSMlR4JY-B-w0831wX7uEnEeSpFjmb5bODABm-P1pv9U16Jfvl6CWbF-yKEBh89mK6N8CnJa5czi5f4hKe9zDKjl037-cU/s1600/helperblogger-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));
}

5-> After Paste The Code Save Your Tepmplate

6-> Go To Layout

7-> Click Add Gadget And Select HTML/JAVASCRIPT

Paste The Below Codes

<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>


Important Note:


Change LINK HERE With Your Link And Change The Text Here With Your Text

Paste This Code Anywhere You Want On Posts

Yipeeeeeeeeeeeeee Now Save The Template And View Your Blog Your CSS Button Is Worked

Please Leave Your Question And Comment Below
Share this article :
Samarth Agarwal (Admin)
Posted By: Samarth Agarwal

Samarth Agarwal is the owner and founder of showmedreams.blogspot.com. I love to blogging,I like to learn and share technical hacking/security tips with you.

Join Me On: Facebook | Twitter | Google Plus
Written By Unknown
Labels: ,

3 comments:

  1. Anonymous13 September 2013 at 05:44

    Hello ! First Thanks for this >> its so cute and looks awesome..

    I have a problem:-
    i want to use this button to add link to download files from file sharing websites like mediafire.com
    so after putting link when i click it when vieweing that post it goes like this :-
    http://bloggger.com/mediafire.com
    How to do it Correct ?

    ReplyDelete
  2. Anonymous14 December 2013 at 08:33

    Nice post . thanks 4 sharing

    For free and full version softwares plz visit ...

    FULL VERSION SOFTWARES FREE


    For WIDGETS AND PLUGINS plz visit ...

    WIDGETS AND PLUGINZ FREE


    For THEMES, TEMPLATES AND WEB LAYOUTS plz visit ...

    BLOGGER , WORDPRESS, JOOMLA , CSS, HTML5 TEMPLATES FREE DOWNLOAD


    For free and full MOVIES ONLINE WATCH plz visit ...

    watch free online movies

    ReplyDelete
  3. Unknown25 December 2013 at 18:28

    seo book here http://bdbook4u.blogspot.com

    ReplyDelete

Before Publishing Your Comment Please Click On Subscribe Button To Get Comments Update Direct Your Email

Subscribe to: Post Comments (Atom)

Subscribe via email

Subscribe via Email
 

Hi! Myself Samarth Agarwal (Pro Blogger and an addicted Web Developer)
1st of All I would like to thanks to all Followers and our lovely Visiters... Read More

Make Dashing Your Blog Copyright © 2016- All Rights Reserved
Designed by: Samarth Agarwal | Powered by: Showmedreams(SMD)