Cara Membuat Button/Tombol Efek Animasi Bubble Menggunakan CSS3

Posted by : Ariq Rastaman Jumat, 18 Oktober 2013

--Tutorial Cara Membuat Button/Tombol Efek Animasi Bubble Menggunakan CSS3--
Button/tombol yang dibuat terdiri dari 3 size atau ukuran yaitu besar, sedang dan kecil. Untuk kode button/tombolnya seperti yang saya tuliskan dibawah ini yang terbagi dalam 4 warna pilihan, sobat tinggal pilih ukuran dan warna yang sesuai yang diinginkan. CHECK IT OUT

Kode button/tombol besar :

<a class="button big blue" href="LINK">LINKNAME</a>

<a class="button big green" href="LINK">LINKNAME</a>

<a class="button big orange" href="LINK">LINKNAME</a>

<a class="button big gray" href="LINK">LINKNAME</a>

Kode button/tombol sedang :

<a class="button blue medium" href="LINK">LINKNAME</a>

<a class="button green medium" href="LINK">LINKNAME</a>

<a class="button orange medium" href="LINK">LINKNAME</a>

<a class="button gray medium" href="LINK">LINKNAME</a>

Kode button/tombol kecil :

<a class="button small blue" href="LINK">LINKNAME</a>

<a class="button small green" href="LINK">LINKNAME</a>

<a class="button small orange" href="LINK">LINKNAME</a>

<a class="button small gray" href="LINK">LINKNAME</a>

Ganti tulisan Link dengan link referensi tujuan jika button/tombol animasi bubble tersebut diklik, kemudian ganti juga tulisan Link-Name dengan nama button atau tulisan yang akan terlihat didalam button. Untuk penempatan kodenya bisa ditempatkan didalam postingan atau kalo mau meletakkannya didalam template maka letakkan dimana saja atau diantara kode <body> dan kode </body> pada template anda. Eeiiitt…sabar jangan di save dulu templatenya karena masih ada kode CSS yang harus sobat masukkan pada template agar button/tombol dengan efek animasi bubble tadi berfungsi dengan baik.

.button{

font:15px 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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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;
}

/* The three buttons sizes */

.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* BlueButton */

.blue.button{
 color:#0f4b6d !important;
 border:1px solid #84acc3 !important;
 background-color: #48b5f2;
 background-image: 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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 */

.green.button{
 color:#345903 !important;
 border:1px solid #96a37b !important; 
 background-color: #79be1e;
 
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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 */

.orange.button{
 color:#693e0a !important;
 border:1px solid #bea280 !important; 
 background-color: #e38d27;
 
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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));
}

/* Orange Button */

.gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1; 
 
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/s144/button_bg.png'),
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonaGmD8cEOIpzIL65dmW8kHEU-B_WF-_2-bScrpYCKvnUyES4-CmoNjXGXc9mlPgBd8Nf9jQsjt0sp4Y95HTAsvzwnc14gqXZ02l7uKFN-WnOZyS_S3-ENekDDLhIl_3xz9faYpSysuaN/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));
}

Copy kode CSS diatas kemudian paste tepat diatas kode ]]></b:skin> pada template anda. Nah sekarang barulah SAVE template anda dan coba lihat hasilnya. Dengan menggunakan button/tombol efek animasi bubble ini pastinya button yang dibuat jadi kelihatan keren dan menarik. Selamat mencoba.

Silahkan Komentar!

PERATURAN BERKOMENTAR DI BLOG OARU:

1. Gunakanlah bahasa yang sopan saat berkomentar.
2. Dilarang Memasang link hidup pada saat berkomentar.
3. Dilarang SPAM !!!
4. Untuk menyisipkan catatan, gunakan [catatan].. CATATAN KAMU ...[/catatan]
5. Untuk menyisipkan gambar, gunakan [img]URL GAMBAR KAMU[/img]

Subscribe to Posts | Subscribe to Comments

Navigation

Popular Post

Popular Posts

Cara Membuat Button/Tombol Efek Animasi Bubble Menggunakan CSS3

Silahkan Komentar!

TEMUKAN KAMI DI

WAKTU&TANGGAL

SEARCH

TRANSLATE

Artikel Terbaru

My Status

About Me

Blog Archive

Followers

Labels

SELAMAT DATANG

Sekilas Tentang Admin

SELAMAT DATANG DI OFFICIAL ARIQ