Skip to main content

Membuat Tombol Bergelembung Dengan CSS3

Ini dia kesukaan saya :)

CSS3 Animated Bubble Buttons ini memiliki tombol animasi unik, ilegan, dan keren pastinya :D ketika kursor mouse anda di arahkan ke atas tombol ini, maka tombol ini akan ada sebuah gelembung atau pelembungan yang bergerak di dalam tombol tersebut. Bukan itu saja.. tombol ini juga memiliki beberapa variasi warna yang di antaranya ada warna Biru, Hijau, Jingga dan Abu abu.



Demo :


Vebriant Xenophobic Vebriant Xenophobic Vebriant Xenophobic Vebriant Xenophobic

Vebriant Xenophobic Vebriant Xenophobic
Vebriant Xenophobic Vebriant Xenophobic


Vebriant Xenophobic Vebriant Xenophobic Vebriant Xenophobic Vebriant Xenophobic

Vebriant Xenophobic
Vebriant Xenophobic
Vebriant Xenophobic
Vebriant Xenophobic

Berikut Caranya 
  • Login ke Blog anda
  • Pilih Template -» Edit HTML
  • Klik kiri pada mouse 1x dimana saja didalam kotak template
  • Cari kode ]]></b:skin> gunakan CTRL + F untuk mempermudah pencarian
  • Paste-kan kode berikut tepat diatas kode ]]></b:skin>


    /* --- Start Animated Bubble Buttons ---- */
    .vx-button {
    font:30px Philosopher, 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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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;
    }
    .vx-button:hover {
    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
    }
    .vx-button:active {
    bottom:-1px;
    }
    .vx-button.big {
    font-size: 30px;
    }
    .vx-button.medium {
    font-size: 18px;
    }
    .vx-button.small {
    font-size: 13px;
    }
    .vx-button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
    }
    .blue.vx-button {
    color:#0f4b6d !important;
    border:1px solid #84acc3 !important;
    background-color: #48b5f2;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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.vx-button:hover {
    background-color:#63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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.vx-button {
    color:#345903 !important;
    border:1px solid #96a37b !important;
    background-color: #79be1e;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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.vx-button:hover {
    background-color:#89d228;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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.vx-button {
    color:#693e0a !important;
    border:1px solid #bea280 !important;
    background-color: #e38d27;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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.vx-button:hover {
    background-color:#ec9732;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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.vx-button {
    color:#525252 !important;
    border:1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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.vx-button:hover {
    background-color:#b6bbc0;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ohw4KrOtSg6yM5MIxwTUgZZAzE6oA4iBsG5w57PgOA2u_hvWz-1IQR2ITvXK9reeHcP8AscKcXNBcH42EZk1Yh52JfC-HSU6GKgLpvv2CNR8zGhyphenhyphenn5UZVOJO6avNGWopItXSd18SuNCY/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));
    }
    /* --- end Animated Bubble Buttons ---- */

    • Selesai simpan template.

    Setelah menyimpan, buatlah sebuah postingan, gadget dan yang lain-nya di blog anda.
    Kita tes dengan mengcopy kode di bawah dan paste di tempat yang anda inginkan.

    Berikut ini adalah untuk tombol kecil dan pilih berdasarkan warna yang anda sukai ;)
    <a class="vx-button small blue" href="Link Anda">Judul Anda</a>
    <a class="vx-button small green" href="Link Anda">Judul Anda</a>
    <a class="vx-button small orange" href="Link Anda">Judul Anda</a>
    <a class="vx-button small gray" href="Link Anda">Judul Anda</a>

    Berikut ini adalah untuk tombol sedang dan pilih berdasarkan warna yang anda sukai ;)
    <a class="vx-button medium blue" href="Link Anda">Judul Anda</a>
    <a class="vx-buttonmedium green" href="Link Anda">Judul Anda</a>
    <a class="vx-button medium orange" href="Link Anda">Judul Anda</a>
    <a class="vx-button medium gray" href="Link Anda">Judul Anda</a>

    Berikut ini adalah untuk tombol besar dan pilih berdasarkan warna yang anda sukai ;)
    <a class="vx-buttonbig blue" href="Link Anda">Judul Anda</a>
    <a class="vx-button big green" href="Link Anda">Judul Anda</a>
    <a class="vx-button big orange" href="Link Anda">Judul Anda</a>
    <a class="vx-button big gray" href="Link Anda">Judul Anda</a>

    Berikut ini adalah untuk tombol bulat kecil, sedang, besar dan pilih berdasarkan warna yang anda sukai ;)
    <a class="vx-button rounded small blue" href="Link Anda">Judul Anda</a>
    <a class="vx-button rounded medium green" href="Link Anda">Judul Anda</a>
    <a class="vx-button rounded big orange" href="Link Anda">Judul Anda</a>
    <a class="vx-button rounded gray" href="Link Anda">Judul Anda</a>


    Keterangan :
    small, medium, big, rounded = ukuran tombol dan bulat
    blue, green, orange, gray     = warna tombol
    ganti Link Anda dengan link anda (http://LinkAnda.com/)
    ganti Judul Anda sesuai dengan keinginan anda (Vebriant Xenophobic)

    Saya rasa cukup sekian, jika masih ada yang belum mengerti silahkan berkomentar.

    Selamat bereksperimen dan salam blogger 



    Ad by Adsterra