Button atau bahasa yang sering di sebut untuk negara ini adalah Tombol dimana kita akan difasilitas kecilkan untuk mengeklik-nya. Bagaimana contoh button umumnya pada web browser kalian? Contohnya seperti ini : Bagus bukan Tombolnya? Tombol tersebut saya ingatkan lagi, itu Tombol paling umum di web browser kalian dengan code <button></button> .
Variasi Button tidak hanya dengan Script itu saja, melainkan Css Hover dan Css Active.
Saya ambil Contoh CSS Code
HTML Code
Button
Dapat disimpulkan dan diartikan bahwa kode CSS Hover (effect yang timbul ketika cursor diarahkan ke elemen) dan Active (effect yang timbul ketika elemen di klik) berperan penting dalam pembuatan Button tersebut.
Setelah kita belajar apa itu Button dan bagaimana pentingnya Kode CSS Hover dan Active, mari kita membuat Bubble Button Css3 Animation. Pernah terfikir gimana membuat Bubble Button menggunakan CSS3 seperti di bawah ini?
Hanya dengan Css3 Bubble Button Animation ini tercipta!
Langsung saja, bagaimana cara membuat Tombol Seperti itu? Langsung simak saja caranya dibawah ini
Variasi Button tidak hanya dengan Script itu saja, melainkan Css Hover dan Css Active.
Saya ambil Contoh CSS Code
.buttonclass{
background:#FF0000;
border:1px solid #777;
padding:5px;
box-shadow:0 0 3px #ccc;
color:#000;
}
.buttonclass:hover{
background:#de0101;
border:1px solid #aaa;
}
.buttonclass:active{
background:#fc0;
border:1px solid #fff;
}
HTML Code
<a href="#" class="buttonclass">Button</a></blockquote>Contoh Hasilnya
Button
Dapat disimpulkan dan diartikan bahwa kode CSS Hover (effect yang timbul ketika cursor diarahkan ke elemen) dan Active (effect yang timbul ketika elemen di klik) berperan penting dalam pembuatan Button tersebut.
Setelah kita belajar apa itu Button dan bagaimana pentingnya Kode CSS Hover dan Active, mari kita membuat Bubble Button Css3 Animation. Pernah terfikir gimana membuat Bubble Button menggunakan CSS3 seperti di bawah ini?
Hanya dengan Css3 Bubble Button Animation ini tercipta!
Langsung saja, bagaimana cara membuat Tombol Seperti itu? Langsung simak saja caranya dibawah ini
- CSS Bubble Button Css3 Animation.button{
font:30px 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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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;
}
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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));
}
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/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));
} - HTML Bubble Button Css3 Animation
<a href="link" class="button gray">Button Text</a>
Terdapat kode merah yang berarti class yang wajib di cantumkan. Dapat di ganti dengan kode orange, green, dan blue! - Cara! Css identik dengan style blog atau website. Untuk Css letakin kode Css di antara kode <style> dengan kode </style> atau <b:skin> dengan kode </b:skin>
Kode HTML bisa diletakan dimanapun selama masih di area <html> dan </html>;
pertamax gag ya? . .
BalasHapusBagus mas!!
Kok saya masih belum ngerti maksud kode tsb . di sana cuma ada pada style css hanya terdapat class button tapi pada link ditulis class button gray .
Hapuskeduax sippp
BalasHapuslain kali ane buat no pertamax keduax ketigax ah b-(
BalasHapusmantap kawan, cuma cssnya buanyak banget =))
BalasHapusIya kawan, wajar lah Css banyak tak sebanding dengan css bubble button yang mantap ini ( wkwokwowkow ) =)) =))
BalasHapuswah... Keren kang, menggunakan css menarik juga, kebetulan kemarin2 saya posting membuat tombol timbul, tapi tanpa css..
BalasHapusThanks kang udah di share... :)
dah jadi arsip ini mah di blog saya...dah basi =))
BalasHapus<a href="#" class="buttonclass">Button</a></blockquote>
apaan itu ada blockquote!!!
wah mantab banget nih, aku bisa belajar css animation yg ok banget... :)
BalasHapusweewww,, kemaren bukannya udah dipost faris.. ane klik postingan dihapus,, =)) =)) ternyata baru dipost hari ini,, wowkowkwok,, =)) keren yaa,, cocok buat ane nih buat link2 download, pake button lebih manteb,, =))
BalasHapusTo V-MediaKom : masa shih sob ada tombol timbul tanpa Css? gimana tuh? sama sama :)
BalasHapusTo Beben Koben : ente mah asal posting aje tanpa mikir pengunjung mau apa :P pengunjung mau nyari juga susah =))
apaan tuh sob? gak ngerti maksudnya? blockquot apa? :-/
To anisayu : hehehehe iya mba mangtaps :) oke deh
To Rama88 : ane sering buat percobaan sob :)) hehehe iya sob baru bisa hari ini :)) bisa banget tuh :)
kren nih lumayan buat link2 khusus biar beda,...
BalasHapussumpah keren banget ne tombolnya sob, kira2 pengaruh sama loading gak y. soalnya bloga ene kan dah berat.
BalasHapuswakwakwak,, pantesan,, kemaren di dashboard ane udah ada post ente,, pas ane klik ora iso,, wkwakwak =)) okedah ntar ane test doloo tombol nya di blog percobaan,, :-* :-*
BalasHapusSaya pake di link sumber bos,berhasil.Thanks ya tipsnya.
BalasHapusdhe jarang make button gitu sob.. tapi bagus juga turornya.. dan aaaaaaaahh, kapan bisa jadi komentator pertamax di blog lu.. #nohope
BalasHapussumpah, bubble buttomnya keren abies sobat,,,, saya jadi kepngen pasang di blog saya untuk buttom link download,,,
BalasHapuslucu banget itu, blog ini dari dulu jadi daftar bookmark saya buat belajar css bikin yg unik2
BalasHapusTp kbanyakan CSS tak berfungsi di Crhome mending ane desainnya yg Standar ajha.
BalasHapusikutan simak gan
BalasHapusaku tak paham css
tutorialnya keren gan, dicoba ya
BalasHapusHihi.. Lucu ya button-nya!
BalasHapusKayak yang ada busanya.
Makasih mas..
wow!! keren neh kang, ane gak pernah sukses kasih class hover buat link 'readmore' gak tau napa tuh
BalasHapusselalu mendapat info2 otak atik css yg menarik disini,keren sob
BalasHapusmantap
BalasHapuslanjutkan,,,
aslinya pusing blajar kode" nih
wew, script CSS itu sbenernya mudah kalo udah tau caranya :D
BalasHapustapi kalo sobat saya ini sudah buanyaakk sekali berbagi yuk mari kita copas. heheheh :))
ijin nyoba dulu sob, thanks for share
ohiya faris,, itu harus nambahin kode css nya di dalam edit HTML ya..? :-o :-o berat kagak ya.. blog gw udah lelet bgt,, :(( :((
BalasHapuswow keren banget bublenya, jadi pengiin
BalasHapusmakasih tipsnya :D
wao keren sob..mantep dah,,,
BalasHapusWah keren banget nih bang,terutama yang biru itu ane suka banget :D
BalasHapusmantab, keren banget sob :)
BalasHapusMantabbs ne bro,
BalasHapusbisa langsung di praktekan....
langsung Bookmark dulua ahh...takut lupa...
thanks bro farixs....
memang Inovasi tiada henti disini....
kereen
Wuih kereeeennyaa...
BalasHapusIlmu tingkat tinggiy niy,
ilmu saya belum nyampai pak...
Makin hari makin top dech sob tips nya di sini....Lanjutkan
BalasHapusTo Rizky Wardiansyah : iya sob kadang perbedaan itu baik :)
BalasHapusTo Liandri eko : gak lambat kok sob :) halaman ini menurut saya tidak lambat, karena kelambatan bubble button animation ini tergantung halaman ini :)
To Rama 88 : lewat gugle buzz ya? wahhh cepet baget tuh. silahkan aja di test :))
To Er'end : heheheh tetapi sobat tidak menggunakan yang Bubble ane dah cek TKP :D ?
To dhenok habibie : jarang sob? berarti pernah dong :)) hehehhee semoga lain kali bisa ya pertamax :)
saya suka bubble buttom yang hijau sobat,, keren abies cocok bgt dipasang di blog saya...
BalasHapusTo Asis Sugianto : hehehhe memang keren sob :) pasang saja sob sebagai panutan tombol download :)
BalasHapusTo dunia otan : masa sih sob daftar bookmark? :) hehehe makasih ya supportnya
To Amhar Sunny : justru google chrome itu support banyak sekali css sob. sobat salah mengartikan
To Obat Sakit 2011 : hehehe jgn simak tetapi tak dilihat :))
To Belajar Komputer : thank ya gan dukungan morilnya :) silahkan di coba
To Kopiah Putih : hehehehe ketawa dong sob :)) =)) sama sama sobat :)
BalasHapusTo Kang Topjer : mungkin sobat kurang menambahkan kode contohnya sebelumnya sobat .class{}.class:hover{} dengan html <a href="#" class="class"></a> yang seharusnya class cssnya itu .class a{}.class a:hover{} :)) ane sok tau nih
To al kahfi : heheheh iya sob lagi jamannya CSS nih :)) #sok tau
To Wisata Outbound Malang : iya sobat :) sobat bisa lebih berkarya mengenai stlye dengan css :) asyik deh pokoknya :) huahahah jgn lupa LINK LINKK!! =)) silahkan di coba
To Rama88 : iya sob di sotu juga bisa. berat gak halaman ini? :))
BalasHapusTo seratus ribu backlink gratis : hehehehe kalau mau ambil saja sob toh kita saling berbagi ;)
To binkbenk : hehehehe memang mantep nih bubble :)
To Musa : yang biru kesukaan sobat ya? :D pilihan yang bagus. biru melambangkan keluasan :) #sok tau
To Asis Sugianto : Button warna Hijau ya? seperti gelembung berterbangan antara dedaunan segar :) hihihi
seperti biasa..
BalasHapuswah keren banget :D (mode alay: on)..
kagak sih,, lumayan cepet,, ntar dah kalo ane udah ganti template aja,, =))
BalasHapusCustom postmu sederhana namun tetap berkesan elegan,ringan lagi di loading,ini ane suka kawan.
BalasHapusOh ya sob,untuk tombol bubble ccs3 animasi kenapa ga jalan di template ku yach,maksudku tobolnya tak berbentuk animasi kaya contoh diatas.Mohon pencerahan kawan.Makasih sebelumnya.
To socafahreza's blog : hehehehe bisa aja nih sobat #jawab ke 4l4y :)) =))
BalasHapusTo Rama88 : uoookee dah ganti template!!!???? =))
To Er'end : lho masa sih? ente letakin cssnya dimana? jgn di postingan lho, tapi di edit html.
ehm...nambah lagi koleksi bookmark gue...nanti gue mau bikin template dengan menu seperti ini...nice share sob...happy blogging!
BalasHapussep nih sob , kalo bisa kurangi penggunaan gambar biar makin fastly :)
BalasHapusBagus sekali tipsnya sob,. :)
BalasHapusWah,. keren2 ni tombolnya?? kalo mbuat ttombol ini pas diklik menuju link tertentu bisa nggak ?? gmna caranya ??
BalasHapusberarti gambar bubble nya bisa kita ganti pake gambar kita sendiri gag kang?!?!
BalasHapusehh komen masuk Spam lagi :(
BalasHapusTo Iskaruji : hehehe bisa aja nih kang :) mantap kang :))
BalasHapusTo Mbah Qopet : penggunaan gambar sangat berperan penting dalam koneksi blog :) benar sekali :)
To FREE DOWNLOAD FULL : heheheh makasih support morilnya :)
To BLOG PREMAN : hehehe lah itu bukannya seperti itu ya? menuju link tertentu :-o itu memang gunanya seperti itu sobbb :))
BalasHapusTo Belajar Photoshop : iya sob bisa di ganti dengan apalah sesuka hati sobat :)
To Mbah : hahahahahaha =)) iya sob bener banget udah masuk SPAM :)) tetapi ane publish lagi aja :)
itu button nya pernah saya lihat dari newbloggingtipz, ehehee =))
BalasHapuskeren deh pokoknya..
sssssiiiiip nanti ane praktekin sob :D. terima kasih infonya :)
BalasHapusbuttonnya keren banget nih gan,,.. kapan ya bisa blogging via compi!??
BalasHapusTo Ladida Cafe : sebenernya gak cuman disitu juga :D banyak kok :)) =))
BalasHapusTo Deganshah Putra : hehehehe silahkan di praktekan :)
To Anonim : emang sobat menggunakan apa sob? HP atau laptop? 8-}
button yg mantab gan . . .
BalasHapustapi sayang saya pake blog flatform WP gratisan, jadi ga bisa kutak-katik CSS . . .
salam kenal . . . [;;)]
warna warni buttonnya :D tapi cuma satu yang tertarik yaitu warna biru :)), nanti saya coba gan :)] seep gan infonya
BalasHapusWuiih,, Button tampilan baru kalo pake CSS3 makin Keren BGT tuh Sob,, kudu dipakek neh,, yg lama Ayas buang dah!!!
BalasHapusHwehehe,, MAKASI BGT yach Sobat!!
Ijin Nyimpen neh,.
sippp dah,, ntar tak cobain lagi kang, emang kalo dah maen css psti dijamin kterusan,
BalasHapusWow..senang bisa berkunjung di blog keren ini. Tipsnya bagus-bagus dan tampilannya segar..;) Well done mas Faris keep on blogging dan sukses terus ya..!
BalasHapusDatang kembali sobat menyapa sobat faris di pagi hari
BalasHapusfariksan tips memang toooooooooooooooppppppp..!! hahaha
BalasHapusthnak berat sob tambahan ilmunya tentang cara membuat Bubble Button Css3 Animation yang sangat cantik. hhehe happy blogging
oh maaf salah ketik, itu seharusnya farixsan tips memang toooooooooooooooppppppp..!! hahaha,, jadi K sseharus adalah X.. maaf sob
BalasHapusbelajar css lagi di sini aku gan
BalasHapusselalu dapet tips oke dari sini.thanks gan..:)
BalasHapusblog yang sangat bagus gan,,,,,,,
BalasHapuskunjungan balik gan
http://www.falahmulyana.com/
happy blogging gan
manteb sob infonya bisa di coba nih
BalasHapussob..bikinin tutorialnya dong cara upload css/body template blog, digoogle site, kayak template loe inilo..kayaknya bikin blog semakin enteng hihi..kemarin ane coba seharian belum berhasil
BalasHapusbelom lah,, ntar tahun baru baru ganti template,, insya allah =))
BalasHapuscss bubelnya kagak nahan :D
BalasHapusTo onesetia82 : wadduhhhh iya sobat yang menggunakan WP gak bisa merasakannya :( salam kenal :)
BalasHapusTo Fazri : huahahhaa kayaknya pada suka warna biru ya? :)) thanks kunjungannya
To BagiBagiBlog : hehehhe bisa aja nih "ayas" huahahaha silahkan di simpan :)
To Kang Topjer : hahahah iya sob terasa mau nyoba nyobalagi :D
To Share With Irfan : wahhhh mkasih banyak ya sobatku irfan :) makasih supportnya :)
BalasHapusTo cardiacku : alhamdulillah sobat akhirnya datang juga :)
To Wisata Murah : hehehehe makaaaaaaaaaaaaasssihhhh bangeet support dan komentarnya :) semoga Css3 Button ini bisa membantu sobat :) huahahahaha gagal ketikan nih sobat :)) gpp :)
To Obat Sakit 2011 : hehehehe iya gan semoga membantu ya :)
To Ageboy : namanya juga farixsanTIPS huahahahaha :)) sam asama :)
BalasHapusTo Falah Mulyana : thanks gan pujiannya :) TKP :)
To widodo : hehehe silahkan di coba sob info dan tipsnya :)
To binkbenk : hehehe buka saja sites.google.com trus liat postku ini http://farixsantips.blogspot.com/2010/10/upload-file-js.html upload file berekstensi .css trus kalau udah di upload ambil linknya trus letakin di atas head menjadi <link href='FILE CSS' rel='stylesheet' type='text/css'/> jadi deh :)
To Rama88 : wahhhhh masih lama dong :| huahahaha =))
BalasHapusTo simple tips : heheheh kagak nahan seperti gimana nih :))
wah, mantep, kereen banget tuh sob...
BalasHapusTo Penghuni 60 : iya sob :) makasih ya kunjungannya :)
BalasHapusowh gag boleh pertamax yah ,, mangap eh maaf :)
BalasHapuswahhh mantap kuadrat bro...,emank sodara sy yg satu ini layak disebut master..heheh.
BalasHapus---
tlg di share ilmu gan.., tentang cara membuat kotak komentar admin berbeda dgn yg lainx.., kemarin aq dah coba bbrp scrip tp gk bisa2..., thx ya sebelumx
To Bayu : iya gak apa apa :-o
BalasHapusTo Rohis Facebook : ane sepertinya tidak bisa posting deh sob sekarang, banyak kok di google, nih http://infokita1978.blogspot.com/2011/05/cara-membuat-komentar-admin-berbeda.html contohnya :)
BalasHapusBeb.. :
BalasHapusManteb lagi,lama ngak d tendok malah makin yahut.. :D
Kunjungan perdana,salam kenal,ijin belajar ya sob.Makasih banyak tuk semua infomu.
BalasHapusBlom berhasil neh nerapinnya di blog ane,
BalasHapusblom begitu paham cara naroknye....hehe....
dipake buat apa yaa....
mantabb boss...
datang malam sobat, maaf sdikit telat, karena banyak kegiatan offline sobat...
BalasHapusHappy bloging sobat...
To aku mau gratisan : hehehehe berkat kalian semuah #halah =))
BalasHapusTo Laras Mays : makasih banyak ya sob atas kunjungan dan komentarnya :)
To zaenal blog : hateemel (html) itu fleksible sob, bisa di taro dimanapun :) ya buat button :)
BalasHapusTo Asis Sugianto : hehehehe tak apa apa sob :) makasih ya kedatangannya :)
iya bagus :D
BalasHapuscuma gak tahu mau ditempatkan dimanaaa
To Nurmayanti Zain : hehehe memang :) dimana saja bisa kok :) :)) namanya juga html ya fleksible :)
BalasHapusberkunjung sob, link nya udah ane pasang. link back donk. mkci
BalasHapusTo Polbeng Kidz : oke sob makasih banyak ya sob atas kerjasamanya :)
BalasHapuscss ini fungsinya buat ap sob
BalasHapushehe...hp jadul gw bru jd.
Jd br smpt kunjung wkwkwk.... Kalau kg jd wah bs kg ngblog gw xixixi....
Wow keren sob ^_^ nice info :D
BalasHapusDatang kembali menyapa sobat hehehhe..
BalasHapusmantab artikelnya bung
BalasHapussorry, blog bagi gua bkn seriusan, klo mo seriusan mah domain sendiri gak pk blogspot.
BalasHapusgue mosting terserah mau gue, kepake sokor gak pake gak maksa...
me is mine, be your self.
ente nanya wae reply itu buata paan!!!
reply = balasan komentar!!!
dah jgn banyak protes, mosting ajah. resource sumber jg kalo bkn original tempelin di postingan, jgn malu.
sorry lg pusing ane bro.
Beben Koben si bloglang anu ganteng kalem tea
blockquote!!!
BalasHapuslihat your HTML code diatasnya tulisan COntoh hasilnya
itu tag penutup toh! mana tag pembukanya...
zzz...
keren abis yang ini sob...
BalasHapuskeren gan... css 3 emang yahud.. btw ane dah like facebooknya, Jika berkenan klik balik ya sob :D
BalasHapusHmm,,, Tombol CSS3nya udah Ayas simpen,,, siap dipublish kapan neh Sob!!!
BalasHapusMo tanya dikit neh... disini apa ada cara membuat Blog pager ( tombol next/Prev ) yg melayang dibawah gitu gak Sob???
datang lagi sobat, melihat perkembangan dari bubble buttom css3 nya, sangat bermanfaat sobat...
BalasHapusmakasih infonya sob
BalasHapusWah bisa pilih tombol banyak warna nih.Ini apa sama kayak spoiler itu ya sob?Terimaksh infonya sob.
BalasHapusTo katils : wahhhh gak keliatan ya sob dari HP :)) lewat PC sob bisanya :)
BalasHapusTo Admin - Ari Software : wahh makasih sob :) hehehe
To cardiacku : hehehe terimakasih untuk kedatangannya kembali :)
To blog aleternativ : hehehe makasih bang :)
To Beben Koben : dibilangin malah marah yaudah =))
To Beben Koben : mana? orang gak ada juga -_- ~x( zzz!!!!!!!
BalasHapusTo >>>ichwan HAUSGAME : heheheh makasih sob supportnya :)
To apakah ini itu : hehehhe bisa aja agan nih :) oke sob aku like balik :)
To BagiBagiBlog : hehehehe oke sob :)) ane belum posting tentang seperti itu sob, cos ane juga gak tau :)
To Asis Sugianto : hehehehe silahkan dilihat lihat sob css3 nya :) hhihi
BalasHapusTo widodo : thanks sob kehadirannya :)
To Bisnis Online Blog : jauh sob sebenernya dari spoiler :)) tombol saja :)
jalan2 malam cari postingan baru heheh....
BalasHapusSepertinya saya pernah baca tutorial sejenis di blog mana ya :/
BalasHapusTo Rohis Facebook : hehehhe silahkan di cari :)) =))
BalasHapusTo Ijal Fauzi : di blog mana? ane gak pernah copas postingan
mampir lageee ahhh,, =))
BalasHapussemangaaaaat. ane datang mencari update dari farixsan yang selalu memberi tips dan solusi. hayah. hehehe. met mlm sob. mampir ne
BalasHapusasemm, keren banget jadinya..
BalasHapusdari yang benar-benar standar jadi keren gitu sob.. mantep :D
keren banget tutoriallnya Sob....
BalasHapussesign blognya juga keren....
design sendiri Sob...??
ooh iya, saya belon ketemu juga neh ink saya... sobat taro sebelah mana y...???
:)
Komentar ini telah dihapus oleh administrator blog.
BalasHapusTo Rama88 : ane lagi mikirin postingan nih, jgn tawa tawa =))
BalasHapusTo Wisata Murah : oke sobbb ane mau membuat postingan :)
To Tituitbom.Com : hehehe jgn asem dong sob, maniisss :)) =)) iya sob namanya juga perubahan :)
To AreL : hehehehe iya sob :) wah makasih ya sob ;) iyah ada di laman Exchange link NOMOR 38. cari aja deh :)
kalau gak bikin lambat boleh juga nie dicoba, biar keren.
BalasHapuscooll effect :D
BalasHapusberkunjung gan
BalasHapusmampir lagee ahhh,, =)) =))
BalasHapusPena hadir dan absen siang sobat sambil beritahu bahwa PR nya telah pena kerjakan..tolong dikoreksi siapa tahu nilainya 100 kwkwkwkwkw......
BalasHapusndak mudheng pak, haduh....
BalasHapusbutuh waktu yang lama untuk mempelajari..
To ZONA DOWNLOAD GRATIS : menurut ane gak lambat :) tetapi terserah sobat aja :)
BalasHapusTo Skydrugz : thanks comment :D
To Obat Sakit 2011 : thanks gan kunjungannya gan :)
To Rama88 : silahkan mejeng mejeng lagi :)
To tautanpena : wahhhhh mantap sob ane dah cek ke TKP, tetapi kok 3 doang ya :-/
bagus banget yah tombolnya
BalasHapussaya nunggu kunjungan balik abang...
hhe
To letheg.blogspot.com : masa sih sob, padahal udah ada demonya :-/
BalasHapusTo Anorexia Photo : hehehe memang sob :) oke TKP ;)
itu warnanya bisa diganti sesua keinginnan kita kan sob?
BalasHapusHalooo... mampir lagi nih setelah hiatus 2 minggu lamanya :)
BalasHapusTo Liandri : Bisa sob pasti bisa lah :D kalau mau warna pink bisa di ganti gradient backgroundnya atau gak usah pakai gradient :)
BalasHapusTo catatan kecilku : wahhhhhh akhirnya datang juga nih catatan mba reni :)
wach,,keren gan tombol downloadnya,sepertinya pas ni ya bila dipasang di blog ane buat tombol download mp3,:-) thank's gan
BalasHapusTo bunggsu : hehehe iya sob cocok banget buat kk yang download mp3 :) jaranya mp3 nih :)
BalasHapuskeren keren tombolnya...
BalasHapusTo Alprablog : iya iya sob :) hihi
BalasHapusNice share sob, ane suka banget ama style blog ini, keren soalnya hehehe maaf agak oot
BalasHapusTo widodo : sama sama kunjungannya :)
BalasHapusTo Abi Says Drunk : hhehehe makasih sekali ya support blogku ;;) thanks ya. oot apa?
keren mas cocok buat fasilitas link untuk download
BalasHapusTo Wahid Sahidu : hehehehe bisa banget tuh sobat :D hihihi
BalasHapuswew keren juga nih...izin sedot...hihihihih
BalasHapuskeren mas bro...
BalasHapusTo Andre Pandet Rank Khoerai : hehehe silahkan di sedot :D
BalasHapusTo anak ganteng : hehehe memang :))
kunjungan balikgan.
BalasHapusmantap juga neh tutorialnya, kapan2 ane praktekin gan, sekarang ane lagi fokua ama Audio Music Editor Software free full
salam kabpemalang
Wah,, keren nih mas bro..:D bisa untuk download button... ;)
BalasHapusTo template blogger seo friendly : oalah sip om kapan saja bisa di gunakan :) hihihi
BalasHapusTo Uzumaki Lovers : iya sob tujuan utamanya untuk itu sob :D
wew keren...baca ini aku jadi teringat sesuatu, thank 4 share ya sob...
BalasHapusTeringat apa mas brong? :) hehehehehe Pacarnya ya yang pernah kasih balon? :) @Pissss
HapusDatang lagi mnatengi blog bang farix yang keren nih sob.Bos, untuk belajar CSS itu dasarannya harus bisa pengkodean ya?Angakat aku jadi muridmu, shifu hehhehheh
BalasHapusTo DerosCode : teringat macam apa tuh :D hehehehe
BalasHapusTo Bisnis Online Blog : aduhh sob jadi tersenyum sendirian hihihi. sobat sebenernya bisa belajar sendiri lho coba coba :) aku juga gak terlalu jago :|
Bagus.. bisa saya terapkan suatu hari nanti untuk keperluan kosomisasi
BalasHapusTo Kang Salman : hehehe ane saja di terapkan setiap postingan berdemo huahaha =))
BalasHapusmakin keren aja yah css3 ....
BalasHapuskeren mas! (y)
BalasHapusTo Ahmad Tajudin : iya namanya juga ilmu teknilogi :)
BalasHapusTo adiz salsabila : makasih mas :)
nice post !!
BalasHapusWiih, 2 jempol buat agan!
BalasHapusGak kepikiran kalo tombolnya bisa dibikin seperti ini :D
Excellent Post gan!