CSS3 Animated Bubble Buttons

April 08, 2012

Bismillah

Bubble Button merupakan tombol yang bergaya animasi dan mengunakan CSS3 hal ini dapat membuat blog sobat tampak lebih futuristik, dan dengan menggunakan tombol ini saya yakin pengunjung pada betah di blog sobat, kenapa karena dalam button ini dirancang seperti nyata, seperti air yang berada dalam toples atau plastik kresek heheh...

Preview

Preview

CARA MEMBUAT CSS3 ANIMATION BUBBLE BUTTONS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Tambahkan kode dibawah ini diatas kode langkah 4

/* 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;
}

.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/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/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/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/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/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/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/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmreeDfrMyyzgsVFKTT4ngjxxmS-0tthyphenhyphenoom6tTtzSnJkfpgylQG7AR1UW2POGCWoNsEHdDyOzMvjEmbbD17tHrIzyGbDOICJm6SHkidqvTof9lp_p9o_Ln4J4E1_XU111cHxab7-mE4/s1600/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));
}

Langkah 6
Klik dan simpan template

KETERANGAN

Gunakan kode dibawah ini untuk memanggil tombol tersebut
Button small blue

Small Button

<a href="#" class="button small blue">Small Button</a>

Button Blue Rounded

Rounded

<a href="#" class="button small blue rounded">Rounded</a>

Button big blue

Big Button

<a href="#" class="button big blue">Big Button</a>

Semoga bermanfaat, Selamat mencoba.. Heppy Blogging :)