You must enable Javascript in your browser to run or open this site.

Bubble Button Css3 Animation

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
.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?
GrayBlueGreenOrange
Hanya dengan Css3 Bubble Button Animation ini tercipta!
Langsung saja, bagaimana cara membuat Tombol Seperti itu? Langsung simak saja caranya dibawah ini happy
  1. 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));
    }
  2. 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!
  3. Cara!
  4. 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>;
Selesai sudah tugas saya pada postingan saya kali ini

151 comments

  1. pertamax gag ya? . .
    Bagus mas!!

    BalasHapus
    Balasan
    1. 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 .

      Hapus
  2. lain kali ane buat no pertamax keduax ketigax ah b-(

    BalasHapus
  3. mantap kawan, cuma cssnya buanyak banget =))

    BalasHapus
  4. Iya kawan, wajar lah Css banyak tak sebanding dengan css bubble button yang mantap ini ( wkwokwowkow ) =)) =))

    BalasHapus
  5. wah... Keren kang, menggunakan css menarik juga, kebetulan kemarin2 saya posting membuat tombol timbul, tapi tanpa css..

    Thanks kang udah di share... :)

    BalasHapus
  6. dah jadi arsip ini mah di blog saya...dah basi =))
    <a href="#" class="buttonclass">Button</a></blockquote>
    apaan itu ada blockquote!!!

    BalasHapus
  7. wah mantab banget nih, aku bisa belajar css animation yg ok banget... :)

    BalasHapus
  8. weewww,, 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,, =))

    BalasHapus
  9. To V-MediaKom : masa shih sob ada tombol timbul tanpa Css? gimana tuh? sama sama :)
    To 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 :)

    BalasHapus
  10. kren nih lumayan buat link2 khusus biar beda,...

    BalasHapus
  11. sumpah keren banget ne tombolnya sob, kira2 pengaruh sama loading gak y. soalnya bloga ene kan dah berat.

    BalasHapus
  12. wakwakwak,, 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,, :-* :-*

    BalasHapus
  13. Saya pake di link sumber bos,berhasil.Thanks ya tipsnya.

    BalasHapus
  14. dhe jarang make button gitu sob.. tapi bagus juga turornya.. dan aaaaaaaahh, kapan bisa jadi komentator pertamax di blog lu.. #nohope

    BalasHapus
  15. sumpah, bubble buttomnya keren abies sobat,,,, saya jadi kepngen pasang di blog saya untuk buttom link download,,,

    BalasHapus
  16. lucu banget itu, blog ini dari dulu jadi daftar bookmark saya buat belajar css bikin yg unik2

    BalasHapus
  17. Tp kbanyakan CSS tak berfungsi di Crhome mending ane desainnya yg Standar ajha.

    BalasHapus
  18. Hihi.. Lucu ya button-nya!
    Kayak yang ada busanya.

    Makasih mas..

    BalasHapus
  19. wow!! keren neh kang, ane gak pernah sukses kasih class hover buat link 'readmore' gak tau napa tuh

    BalasHapus
  20. selalu mendapat info2 otak atik css yg menarik disini,keren sob

    BalasHapus
  21. mantap
    lanjutkan,,,
    aslinya pusing blajar kode" nih

    BalasHapus
  22. wew, script CSS itu sbenernya mudah kalo udah tau caranya :D
    tapi kalo sobat saya ini sudah buanyaakk sekali berbagi yuk mari kita copas. heheheh :))
    ijin nyoba dulu sob, thanks for share

    BalasHapus
  23. ohiya faris,, itu harus nambahin kode css nya di dalam edit HTML ya..? :-o :-o berat kagak ya.. blog gw udah lelet bgt,, :(( :((

    BalasHapus
  24. wow keren banget bublenya, jadi pengiin
    makasih tipsnya :D

    BalasHapus
  25. Wah keren banget nih bang,terutama yang biru itu ane suka banget :D

    BalasHapus
  26. Mantabbs ne bro,
    bisa langsung di praktekan....
    langsung Bookmark dulua ahh...takut lupa...
    thanks bro farixs....
    memang Inovasi tiada henti disini....
    kereen

    BalasHapus
  27. Wuih kereeeennyaa...
    Ilmu tingkat tinggiy niy,
    ilmu saya belum nyampai pak...

    BalasHapus
  28. Makin hari makin top dech sob tips nya di sini....Lanjutkan

    BalasHapus
  29. To Rizky Wardiansyah : iya sob kadang perbedaan itu baik :)
    To 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 :)

    BalasHapus
  30. saya suka bubble buttom yang hijau sobat,, keren abies cocok bgt dipasang di blog saya...

    BalasHapus
  31. To Asis Sugianto : hehehhe memang keren sob :) pasang saja sob sebagai panutan tombol download :)
    To 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

    BalasHapus
  32. To Kopiah Putih : hehehehe ketawa dong sob :)) =)) sama sama sobat :)
    To 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

    BalasHapus
  33. To Rama88 : iya sob di sotu juga bisa. berat gak halaman ini? :))
    To 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

    BalasHapus
  34. seperti biasa..
    wah keren banget :D (mode alay: on)..

    BalasHapus
  35. kagak sih,, lumayan cepet,, ntar dah kalo ane udah ganti template aja,, =))

    BalasHapus
  36. Custom postmu sederhana namun tetap berkesan elegan,ringan lagi di loading,ini ane suka kawan.
    Oh 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.

    BalasHapus
  37. To socafahreza's blog : hehehehe bisa aja nih sobat #jawab ke 4l4y :)) =))
    To Rama88 : uoookee dah ganti template!!!???? =))
    To Er'end : lho masa sih? ente letakin cssnya dimana? jgn di postingan lho, tapi di edit html.

    BalasHapus
  38. ehm...nambah lagi koleksi bookmark gue...nanti gue mau bikin template dengan menu seperti ini...nice share sob...happy blogging!

    BalasHapus
  39. sep nih sob , kalo bisa kurangi penggunaan gambar biar makin fastly :)

    BalasHapus
  40. Wah,. keren2 ni tombolnya?? kalo mbuat ttombol ini pas diklik menuju link tertentu bisa nggak ?? gmna caranya ??

    BalasHapus
  41. berarti gambar bubble nya bisa kita ganti pake gambar kita sendiri gag kang?!?!

    BalasHapus
  42. To Iskaruji : hehehe bisa aja nih kang :) mantap kang :))
    To Mbah Qopet : penggunaan gambar sangat berperan penting dalam koneksi blog :) benar sekali :)
    To FREE DOWNLOAD FULL : heheheh makasih support morilnya :)

    BalasHapus
  43. To BLOG PREMAN : hehehe lah itu bukannya seperti itu ya? menuju link tertentu :-o itu memang gunanya seperti itu sobbb :))
    To 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 :)

    BalasHapus
  44. itu button nya pernah saya lihat dari newbloggingtipz, ehehee =))
    keren deh pokoknya..

    BalasHapus
  45. sssssiiiiip nanti ane praktekin sob :D. terima kasih infonya :)

    BalasHapus
  46. buttonnya keren banget nih gan,,.. kapan ya bisa blogging via compi!??

    BalasHapus
  47. To Ladida Cafe : sebenernya gak cuman disitu juga :D banyak kok :)) =))
    To Deganshah Putra : hehehehe silahkan di praktekan :)
    To Anonim : emang sobat menggunakan apa sob? HP atau laptop? 8-}

    BalasHapus
  48. button yg mantab gan . . .
    tapi sayang saya pake blog flatform WP gratisan, jadi ga bisa kutak-katik CSS . . .
    salam kenal . . . [;;)]

    BalasHapus
  49. warna warni buttonnya :D tapi cuma satu yang tertarik yaitu warna biru :)), nanti saya coba gan :)] seep gan infonya

    BalasHapus
  50. Wuiih,, Button tampilan baru kalo pake CSS3 makin Keren BGT tuh Sob,, kudu dipakek neh,, yg lama Ayas buang dah!!!
    Hwehehe,, MAKASI BGT yach Sobat!!
    Ijin Nyimpen neh,.

    BalasHapus
  51. sippp dah,, ntar tak cobain lagi kang, emang kalo dah maen css psti dijamin kterusan,

    BalasHapus
  52. Wow..senang bisa berkunjung di blog keren ini. Tipsnya bagus-bagus dan tampilannya segar..;) Well done mas Faris keep on blogging dan sukses terus ya..!

    BalasHapus
  53. Datang kembali sobat menyapa sobat faris di pagi hari

    BalasHapus
  54. fariksan tips memang toooooooooooooooppppppp..!! hahaha

    thnak berat sob tambahan ilmunya tentang cara membuat Bubble Button Css3 Animation yang sangat cantik. hhehe happy blogging

    BalasHapus
  55. oh maaf salah ketik, itu seharusnya farixsan tips memang toooooooooooooooppppppp..!! hahaha,, jadi K sseharus adalah X.. maaf sob

    BalasHapus
  56. selalu dapet tips oke dari sini.thanks gan..:)

    BalasHapus
  57. blog yang sangat bagus gan,,,,,,,

    kunjungan balik gan

    http://www.falahmulyana.com/
    happy blogging gan

    BalasHapus
  58. manteb sob infonya bisa di coba nih

    BalasHapus
  59. sob..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

    BalasHapus
  60. belom lah,, ntar tahun baru baru ganti template,, insya allah =))

    BalasHapus
  61. To onesetia82 : wadduhhhh iya sobat yang menggunakan WP gak bisa merasakannya :( salam kenal :)
    To 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

    BalasHapus
  62. To Share With Irfan : wahhhh mkasih banyak ya sobatku irfan :) makasih supportnya :)
    To 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 :)

    BalasHapus
  63. To Ageboy : namanya juga farixsanTIPS huahahahaha :)) sam asama :)
    To 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 :)

    BalasHapus
  64. To Rama88 : wahhhhh masih lama dong :| huahahaha =))
    To simple tips : heheheh kagak nahan seperti gimana nih :))

    BalasHapus
  65. wah, mantep, kereen banget tuh sob...

    BalasHapus
  66. To Penghuni 60 : iya sob :) makasih ya kunjungannya :)

    BalasHapus
  67. owh gag boleh pertamax yah ,, mangap eh maaf :)

    BalasHapus
  68. wahhh mantap kuadrat bro...,emank sodara sy yg satu ini layak disebut master..heheh.
    ---
    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

    BalasHapus
  69. To 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 :)

    BalasHapus
  70. Beb.. :
    Manteb lagi,lama ngak d tendok malah makin yahut.. :D

    BalasHapus
  71. Kunjungan perdana,salam kenal,ijin belajar ya sob.Makasih banyak tuk semua infomu.

    BalasHapus
  72. Blom berhasil neh nerapinnya di blog ane,
    blom begitu paham cara naroknye....hehe....
    dipake buat apa yaa....
    mantabb boss...

    BalasHapus
  73. datang malam sobat, maaf sdikit telat, karena banyak kegiatan offline sobat...

    Happy bloging sobat...

    BalasHapus
  74. To aku mau gratisan : hehehehe berkat kalian semuah #halah =))
    To Laras Mays : makasih banyak ya sob atas kunjungan dan komentarnya :)

    BalasHapus
  75. To zaenal blog : hateemel (html) itu fleksible sob, bisa di taro dimanapun :) ya buat button :)
    To Asis Sugianto : hehehehe tak apa apa sob :) makasih ya kedatangannya :)

    BalasHapus
  76. iya bagus :D

    cuma gak tahu mau ditempatkan dimanaaa

    BalasHapus
  77. To Nurmayanti Zain : hehehe memang :) dimana saja bisa kok :) :)) namanya juga html ya fleksible :)

    BalasHapus
  78. berkunjung sob, link nya udah ane pasang. link back donk. mkci

    BalasHapus
  79. To Polbeng Kidz : oke sob makasih banyak ya sob atas kerjasamanya :)

    BalasHapus
  80. css ini fungsinya buat ap sob

    hehe...hp jadul gw bru jd.
    Jd br smpt kunjung wkwkwk.... Kalau kg jd wah bs kg ngblog gw xixixi....

    BalasHapus
  81. Datang kembali menyapa sobat hehehhe..

    BalasHapus
  82. sorry, blog bagi gua bkn seriusan, klo mo seriusan mah domain sendiri gak pk blogspot.
    gue 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

    BalasHapus
  83. blockquote!!!
    lihat your HTML code diatasnya tulisan COntoh hasilnya
    itu tag penutup toh! mana tag pembukanya...
    zzz...

    BalasHapus
  84. keren gan... css 3 emang yahud.. btw ane dah like facebooknya, Jika berkenan klik balik ya sob :D

    BalasHapus
  85. Hmm,,, Tombol CSS3nya udah Ayas simpen,,, siap dipublish kapan neh Sob!!!
    Mo tanya dikit neh... disini apa ada cara membuat Blog pager ( tombol next/Prev ) yg melayang dibawah gitu gak Sob???

    BalasHapus
  86. datang lagi sobat, melihat perkembangan dari bubble buttom css3 nya, sangat bermanfaat sobat...

    BalasHapus
  87. Wah bisa pilih tombol banyak warna nih.Ini apa sama kayak spoiler itu ya sob?Terimaksh infonya sob.

    BalasHapus
  88. To katils : wahhhh gak keliatan ya sob dari HP :)) lewat PC sob bisanya :)
    To 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 =))

    BalasHapus
  89. To Beben Koben : mana? orang gak ada juga -_- ~x( zzz!!!!!!!
    To >>>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 :)

    BalasHapus
  90. To Asis Sugianto : hehehehe silahkan dilihat lihat sob css3 nya :) hhihi
    To widodo : thanks sob kehadirannya :)
    To Bisnis Online Blog : jauh sob sebenernya dari spoiler :)) tombol saja :)

    BalasHapus
  91. jalan2 malam cari postingan baru heheh....

    BalasHapus
  92. Sepertinya saya pernah baca tutorial sejenis di blog mana ya :/

    BalasHapus
  93. To Rohis Facebook : hehehhe silahkan di cari :)) =))
    To Ijal Fauzi : di blog mana? ane gak pernah copas postingan

    BalasHapus
  94. semangaaaaat. ane datang mencari update dari farixsan yang selalu memberi tips dan solusi. hayah. hehehe. met mlm sob. mampir ne

    BalasHapus
  95. asemm, keren banget jadinya..
    dari yang benar-benar standar jadi keren gitu sob.. mantep :D

    BalasHapus
  96. keren banget tutoriallnya Sob....
    sesign blognya juga keren....

    design sendiri Sob...??

    ooh iya, saya belon ketemu juga neh ink saya... sobat taro sebelah mana y...???

    :)

    BalasHapus
  97. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  98. To Rama88 : ane lagi mikirin postingan nih, jgn tawa tawa =))
    To 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 :)

    BalasHapus
  99. kalau gak bikin lambat boleh juga nie dicoba, biar keren.

    BalasHapus
  100. Pena hadir dan absen siang sobat sambil beritahu bahwa PR nya telah pena kerjakan..tolong dikoreksi siapa tahu nilainya 100 kwkwkwkwkw......

    BalasHapus
  101. ndak mudheng pak, haduh....

    butuh waktu yang lama untuk mempelajari..

    BalasHapus
  102. To ZONA DOWNLOAD GRATIS : menurut ane gak lambat :) tetapi terserah sobat aja :)
    To 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 :-/

    BalasHapus
  103. bagus banget yah tombolnya
    saya nunggu kunjungan balik abang...
    hhe

    BalasHapus
  104. To letheg.blogspot.com : masa sih sob, padahal udah ada demonya :-/
    To Anorexia Photo : hehehe memang sob :) oke TKP ;)

    BalasHapus
  105. itu warnanya bisa diganti sesua keinginnan kita kan sob?

    BalasHapus
  106. Halooo... mampir lagi nih setelah hiatus 2 minggu lamanya :)

    BalasHapus
  107. To Liandri : Bisa sob pasti bisa lah :D kalau mau warna pink bisa di ganti gradient backgroundnya atau gak usah pakai gradient :)
    To catatan kecilku : wahhhhhh akhirnya datang juga nih catatan mba reni :)

    BalasHapus
  108. wach,,keren gan tombol downloadnya,sepertinya pas ni ya bila dipasang di blog ane buat tombol download mp3,:-) thank's gan

    BalasHapus
  109. To bunggsu : hehehe iya sob cocok banget buat kk yang download mp3 :) jaranya mp3 nih :)

    BalasHapus
  110. To Alprablog : iya iya sob :) hihi

    BalasHapus
  111. Nice share sob, ane suka banget ama style blog ini, keren soalnya hehehe maaf agak oot

    BalasHapus
  112. To widodo : sama sama kunjungannya :)
    To Abi Says Drunk : hhehehe makasih sekali ya support blogku ;;) thanks ya. oot apa?

    BalasHapus
  113. keren mas cocok buat fasilitas link untuk download

    BalasHapus
  114. To Wahid Sahidu : hehehehe bisa banget tuh sobat :D hihihi

    BalasHapus
  115. wew keren juga nih...izin sedot...hihihihih

    BalasHapus
  116. To Andre Pandet Rank Khoerai : hehehe silahkan di sedot :D
    To anak ganteng : hehehe memang :))

    BalasHapus
  117. kunjungan balikgan.
    mantap juga neh tutorialnya, kapan2 ane praktekin gan, sekarang ane lagi fokua ama Audio Music Editor Software free full
    salam kabpemalang

    BalasHapus
  118. Wah,, keren nih mas bro..:D bisa untuk download button... ;)

    BalasHapus
  119. To template blogger seo friendly : oalah sip om kapan saja bisa di gunakan :) hihihi
    To Uzumaki Lovers : iya sob tujuan utamanya untuk itu sob :D

    BalasHapus
  120. wew keren...baca ini aku jadi teringat sesuatu, thank 4 share ya sob...

    BalasHapus
    Balasan
    1. Teringat apa mas brong? :) hehehehehe Pacarnya ya yang pernah kasih balon? :) @Pissss

      Hapus
  121. Datang 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

    BalasHapus
  122. To DerosCode : teringat macam apa tuh :D hehehehe
    To Bisnis Online Blog : aduhh sob jadi tersenyum sendirian hihihi. sobat sebenernya bisa belajar sendiri lho coba coba :) aku juga gak terlalu jago :|

    BalasHapus
  123. Bagus.. bisa saya terapkan suatu hari nanti untuk keperluan kosomisasi

    BalasHapus
  124. To Kang Salman : hehehe ane saja di terapkan setiap postingan berdemo huahaha =))

    BalasHapus
  125. To Ahmad Tajudin : iya namanya juga ilmu teknilogi :)
    To adiz salsabila : makasih mas :)

    BalasHapus
  126. Wiih, 2 jempol buat agan!
    Gak kepikiran kalo tombolnya bisa dibikin seperti ini :D
    Excellent Post gan!

    BalasHapus