Cara Membuat Tombol Menggunakan CSS3
Setelah kemarin kita belajar mengenai border-radius sekarang kita akan mencoba mengimplementasikanya ke dalam sebuah tombol. Tombol ini nantinya bisa kita aplikasikan ke dalam banyak hal, misalkan untuk membuat tombol search atau navbar dll. Membuat tombol menggunakan CSS3 sangatlah gampang dan tidak membutuhkan gambar atau JavaScript. untuk lebih jelasnya, silahkan lihat tombol - tombol yang ada di bawah ini :
Biru
Merah
Hitam
Hijau
Coklat
Default
Ukuran yang Lebih Besar
Default
Ukuran yang Lebih Kecil
Kode CSS yang saya gunakan adalah :
Kode HTML yang saya gunakan adalah :
<a class="tombol biru" href="#"><span>Biru</span></a>
<a class="tombol merah" href="#"><span>Merah</span></a>
<a class="tombol hitam" href="#"><span>Hitam</span></a>
<a class="tombol hijau" href="#"><span>Hijau</span></a>
<a class="tombol coklat" href="#"><span>Coklat</span></a>
<a class="tombol" href="#"><span>Default</span></a>
Bersambung...
Kode CSS yang saya gunakan adalah :
.tombol {
background: #777;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 1px;
vertical-align: middle;
}
.tombol span {
border-top: 1px solid rgba(255, 255, 255, 0.25);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
display: block;
font: bold 12px 'Arial', sans-serif;
padding: 6px 12px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}
.tombol:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
text-decoration: none;
}
.tombol:active {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.2)));
background-image: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.2));
}
.tombol:active span {
border-top-color: rgba(0, 0, 0, 0.2);
}
.tombol.hitam { background-color: #252a2a; }
.tombol.biru { background-color: #3792c6; }
.tombol.merah { background-color: #cc2222; }
.tombol.hijau { background-color: #69a846; }
.tombol.coklat { background-color: #b6761a; }
.tombol.besar sapan { font-size: 16px; padding: 6px 14px; }
.tombol.kecil sapan { font-size: 11px; padding: 4px 8px; }
background: #777;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 1px;
vertical-align: middle;
}
.tombol span {
border-top: 1px solid rgba(255, 255, 255, 0.25);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
display: block;
font: bold 12px 'Arial', sans-serif;
padding: 6px 12px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}
.tombol:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
text-decoration: none;
}
.tombol:active {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.2)));
background-image: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.2));
}
.tombol:active span {
border-top-color: rgba(0, 0, 0, 0.2);
}
.tombol.hitam { background-color: #252a2a; }
.tombol.biru { background-color: #3792c6; }
.tombol.merah { background-color: #cc2222; }
.tombol.hijau { background-color: #69a846; }
.tombol.coklat { background-color: #b6761a; }
.tombol.besar sapan { font-size: 16px; padding: 6px 14px; }
.tombol.kecil sapan { font-size: 11px; padding: 4px 8px; }
Kode HTML yang saya gunakan adalah :
<a class="tombol biru" href="#"><span>Biru</span></a>
<a class="tombol merah" href="#"><span>Merah</span></a>
<a class="tombol hitam" href="#"><span>Hitam</span></a>
<a class="tombol hijau" href="#"><span>Hijau</span></a>
<a class="tombol coklat" href="#"><span>Coklat</span></a>
<a class="tombol" href="#"><span>Default</span></a>
<a class="tombol besar" href="#"><span>Ukuran yang lebih besar</span></a>
<a class="tombol" href="#"><span>Default</span></a>
<a class="tombol kecil" href="#"><span>Ukuran yang lebih kecil</span></a>
<a class="tombol kecil" href="#"><span>Ukuran yang lebih kecil</span></a>
Bersambung...
wow..blog ini membahas css3 di hover seperti ini:
.tombol:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
text-decoration: none;
}
Coba saya akan ganti sobat juga bisa mencoba:
.tombol:hover{-webkit-box-shadow:inset 0 -10px 30px rgba(0,0,0,0.75);
-moz-box-shadow:inset 0 -10px 30px rgba(0,0,0,0.75);
box-shadow:inset 0 -10px 30px rgba(0,0,0,0.75);
background:-webkit-gradient(radial, 50 30, 40, center center, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.75)));
}
Itu saya cobe penambahan box-shadow dengan inset jadi bayangan di dalam>>
Lalu sebelum hover ada tambahan seperti ini
silahkan di coba:
/*taruh sebelum hover*/
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
/* text-shadow */
-webkit-text-shadow:0 -1px 1px rgba(0,0,0,0.5);
-moz-text-shadow:0 -1px 1px rgba(0,0,0,0.5);
text-shadow:0 -1px 1px rgba(0,0,0,0.5);
/* box-shadow */
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.75);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.75);
box-shadow:0 5px 10px rgba(0,0,0,0.75);
/* ini adalah perputaran */
-webkit-transition:-webkit-box-shadow 0.2s ease-out, top 0.2s ease-out;
-moz-transition:-moz-box-shadow 0.2s ease-out, top 0.2s ease-out;
-o-transition:box-shadow 0.3s ease-out, top 0.2s ease-out;
transition:box-shadow 0.3s ease-out, top 0.2s ease-out;
}
Itu sepertinya bagus tapi ga tau ya>.. hehehe, keep on blogging,, saya ikuti blog ini lewat feed
wah keren blogger admin...
aku blm slese nulis artikelnya dah ketahuan mau nilis apa... emang master-nya css3 indonesia...
jd minder...
terimakasih sudah datang ke blog aku...
eh ketinggalan...
masalah penggunaan inset di shadow...
aku dah lama mencobanya di www.nuvent.co.cc tp hasilnya ada sedikit bug klo di buka pakai google chrome.. ada saran??
bang hendro...
pada saat saya coba tambahanya ternyata kok jd aneh ya??
maaf...
masalah penggunaan inset di shadow... ada saran??
untuk komen di image galery:
yups...bener di webkit kan? ketika di hover miring2..heheheheh,, memang saya buat seperti itu, agar pembaca dan yang membuat tahu perbedaaan dan membaca lagi di teknik animasi part1 tentang pembuatan rotate, karena jujur saya tidak memberikan full code, agar bisa di telaah sendiri jadi tidak mentah,, seperti sahabat blogger yang bisa mengutak-atik, karena kita tidak mentah mengkopi..maaf sekali lagi tutor saya lain daripada yang lain..
untuk inset di image galery postingan saya sudah di berikan, terlihat bayangan terang di dalam, dengan background batu bata..
pada saat mencoba tambahannya terlihat bundarkah tombolnya?
nanti saya akan berusaha memposting tentang inset dan box-shadow, karena saya juga masih belajar nih..waktu juga kadang terbatas..
aku mau kunjungi dulu www.nuvent.co.cc
terima kasih sobat,, aku suka saling berbagi
Sepertinya untuk efek transisi yang aneh-aneh dan berlebihan tidak bagus diterapkan pada desain blog. Tidak memberikan banyak kontribusi positif pada usabilitas, mungkin malah negatif.
Efek easing mungkin cocok untuk mengubah warna latar tombol, misalnya:
-webkit-transition:background .4s ease-out;
Sepertinya itu sudah cukup
Wahh Asyik Nich Para Master Lagi Kasih Pendapatnya hehhehhee......yang penting buat saya nice artikel sob hhheheee salam knl ya blogger pemula.....