Cara Membuat Animated Bubble Buttons CSS3

Baiklah Tutorial Kita kali ini Masih seputar CSS3, lagi ngidam CSS3 kayanya jadi pengen terus posting tutorial CSS3 .. hehe, Untuk kali ini saya menemukkan Tutorial Membuat Button di tutorialzine.com tapi memiliki Animasi bubble menggunakkan CSS3.

Button ini diberi background image dengan Buble yang masing-masing mempunyai tempat saat kita sorot dengan kursor atau pada saat hovernya. untuk membuat sekaligus melihat demonya kita praktekkan sekarang juga:

Untuk Cara membuatnya ikuti langkah-langkah berikut :

1. Login blogger
2. Rancangan, Edit Html
3. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya:

.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/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/s1600/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;
}
.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/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/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/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/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/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/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/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/s1600/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPYiKxdjxYYMUYq_xRAy_LEI9mvgJEAGyo-cks273c1cb3I_oF0VaIP7V6YDfOK01pX7vqv5zG4xD2XeM0lVMuBXqRQD5Zq5fJdP4C9xYlXbmyJ3pkgY5q-y07cGZN9AmJe2s6SxYspU/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));
}

4. Simpan Template, dan berikutnya untuk penggunaan Buttonnya, masuk ke Posting, Entri baru, Edit html:

• Button small blue

Small Button

Pemanggilannya pada edit html:

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

• Button Blue Rounded

Blue Rounded

Pemanggilannya pada edit html:

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

• Button big blue

Big Button


Pemanggilannya pada edit html:

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

4. Selesai dan coba lihat hasilnya. Please rate this article: