MEDIA PERCOBAAN

Dec

Scroll Bok Ala GUbuk Reyot

Demo Box Author Dengan CSS3

Dec

KT2

KT Coloum

Dec

Complete Subscription Box For Blogger

Add Widget :

<!-- Widget By Shahbaz Malik on http://internetricks4u.blogspot.in -->         
<style type="text/css">                                                        
.abtbar{width:300px;float:left;background:#FFF top no-repeat;margin:0 0 10px;padding:10px;border:0px solid #DDD;}.abtbar .abt-credit{}.abtbar .abt-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.abtbar h2{background:URLundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKc5wy3DvBCti-K3cmpvDVVmJ3ZNVhTrjIkO1MpYS-uzMzk6tPUy0kZ7PVYjIAYKfuyO_PKFSLOG4HiQYIy6yGJT4X_Ob8j3SEE-GAPyZjnqz0dTMIdfoUymYOie40LtLXBwmwfZS0dfI/s1600/%5Bwww.internetricks4u.blogspot.in%5DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.abtbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.abtbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.abtbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.abtbar .subicons a{text-decoration:none;color:#333333;}.abtbar .subicons a:hover{text-decoration:underline;color:#333333;}.abtbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQCPcyMnI9aOVo3MvTMmOyoerQj5OmHH9uhCoguiVUhzvQacGo1vV0Y75E04vzJguREIIbDKQlsEkX4q0lxXMjlzqr5Mr2NzpgPp4qdz-vgK2KHwZfpsb72M6fEoZxJKjSARI83A2woY/s1600/Widget_icon.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQCPcyMnI9aOVo3MvTMmOyoerQj5OmHH9uhCoguiVUhzvQacGo1vV0Y75E04vzJguREIIbDKQlsEkX4q0lxXMjlzqr5Mr2NzpgPp4qdz-vgK2KHwZfpsb72M6fEoZxJKjSARI83A2woY/s1600/Widget_icon.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQCPcyMnI9aOVo3MvTMmOyoerQj5OmHH9uhCoguiVUhzvQacGo1vV0Y75E04vzJguREIIbDKQlsEkX4q0lxXMjlzqr5Mr2NzpgPp4qdz-vgK2KHwZfpsb72M6fEoZxJKjSARI83A2woY/s1600/Widget_icon.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .twittericon{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQCPcyMnI9aOVo3MvTMmOyoerQj5OmHH9uhCoguiVUhzvQacGo1vV0Y75E04vzJguREIIbDKQlsEkX4q0lxXMjlzqr5Mr2NzpgPp4qdz-vgK2KHwZfpsb72M6fEoZxJKjSARI83A2woY/s1600/Widget_icon.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.abtbar .emailsub .emailicon{background:urlundefinedhttp://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.abtbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.abtbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.abtbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradientundefinedlinear,left top,left bottom,color-stopundefined#F9EAD4,0),color-stopundefined#F9780E,1));background:-webkit-linear-gradientundefinedtop,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradientundefinedtop,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradientundefinedtop,#F9EAD4 0%,#F9780E 100%);background:linear-gradientundefinedtop,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradientundefinedlinear,left top,left bottom,fromundefined#57ABFE),toundefined#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style><div class="abtbar">
<h2 class="title">
Subscribe Now!</h2>
<div class="count">
<span class="bigcount"></span>Learn Free Pro Tricks daily </div>
<div class="subicons">
<div class="rssicon">
&nbsp;<a href="http://feeds.feedburner.com/Alexjoen" rel="nofollow" target="_blank">  RSS</a></div>
<div class="googleicon">
&nbsp;<a href="https://plus.google.com/4797976461467566905" rel="author" target="_blank"> G+</a></div>
<div class="fbicon">
&nbsp;<a href="http://www.facebook.com/alex.pangeran.maya" rel="nofollow" target="_blank">FB</a></div>
<div class="twittericon">
&nbsp;<a href="https://twitter.com/alexjoen" rel="nofollow" target="_blank">Twitter</a></div>
</div>
<div class="emailsub">
<div class="emailicon">
<div style="color: #3a3a3a; font-family: Helvetica, Arial; font-size: 13px; font-weight: normal; margin: 0; padding: 0; width: 270px;">
Receive Our All Updates  In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</div>
</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=DanishMir', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if undefinedthis.value == '') {this.value = 'Enter your email here...';}" onfocus="if undefinedthis.value == 'Enter your email here...') {this.value = '';}" type="text" placeholder="Enter your email here..." /><input name="uri" type="hidden" value="DanishMir" /><input class="joinemailupdates" type="submit" value="Submit" /></form>
<span class="abt-credit" style="font-family: Arial,Helvetica,sans-serif;"></span></div>
</div>
</div>

Posts by M. Alex Joenaedi

Hi, My name is Muhammad Alex Joenaedi. I am author of this blog.I love blogging and I like to share things which I know.

Follow Me On Twitter Or Facebook

Animated CSS3 Buble Button

Go to Blogger Dashboard > Template
As always take a backup of your template
Search for below code in your template ]]></b:skin>
Add below code just above it

1. CSS3 Part

.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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DlcT8__gHEKVZFHhFD2zrhXGxTomBxwQ4N6MXbcoWbilFrjFcfs36K6LH5InPo3gdW-EichVZS7Jk4_VwPl9ZhhUzzxiMrnenTTVZxb8GZKPYRhjVuG4EOTJSxxn-lf7CQd5r5uyZ8s/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));
}

2. HTML Part
1.HTML For Big Button (Choose anyone according to button color)

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

2.HTML For Medium Button (Choose anyone according to button color)

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

3.HTML For Small Button (Choose anyone according to button color)

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

4.HTML For Small Rounded Buttons (Choose anyone according to button color)

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

Posts by M. Alex Joenaedi

Hi, My name is Muhammad Alex Joenaedi. I am author of this blog.I love blogging and I like to share things which I know.

Follow Me On Twitter Or Facebook

MEDIA PERCOBAAN

Scroll Bok Ala GUbuk Reyot

Judul-1

Judul-2

Posts by M. Alex Joenaedi

Demo Box Author Dengan CSS3

Arahkan Mouse padaku

Hi, my name is Alexjoen

Posts by M. Alex Joenaedi

KT2

Posts by M. Alex Joenaedi

KT Coloum

Posts by M. Alex Joenaedi

Complete Subscription Box For Blogger

Posts by M. Alex Joenaedi

Animated CSS3 Buble Button

Posts by M. Alex Joenaedi

About The Author Widget

Posts by M. Alex Joenaedi