Free CSS Button Generator
Free CSS Button Generator. Membuat tombol (button) dengan CSS sebenarnya sangat mudah, apalagi jika sudah mahir, maka tombol-tombol yang dihasilkan akan sangat mirip seperti ketika tombol-tombol tersebut menggunakan sebuah gambar. Akan tetapi bagi sebagian orang CSS itu mungkin malah akan bikin pusing, padahal kalau sudah mengetahui seluk beluknya, belajar CSS itu akan membuat ketagihan.
Nah jika anda ingin belajar membuat tombol (button) dengan CSS (seperti tombol download) dan kebetulan anda belum menguasai ilmu CSS, maka anda tidak perlu pusing berlama-lama untuk belajar tentang elemen-elemen yang dibutuhkan untuk bisa membuat tombol dengan CSS seperti : class, box-shadow, gradient, background-color, border-radius, display, font-family, font-size, font-weight, padding, text-decoration, text-shadow, hover dll.
Untuk cara cepat dan praktis dalam membuat tombol (button) dengan CSS, anda bisa menggunakan bantuan CSS Button Generator (cssbuttongenerator.com). Fiturnya cukup sederhana dan mudah digunakan seperti : pengaturan Button Text, CSS Class Name, pengaturan box-shadow, gradient, background-color, border-radius, pengaturan font, text-decoration, text-shadow dll.
Cara Menggunakannya :
- Silahkan buka halaman web CSS Button Generator (http://www.cssbuttongenerator.com).
- Atur elemen-elemen sepertiĀ Button Text (tulisan yang akan ditampilkan di tengah tombol seperti tulisan : Free Download), CSS class name (nama class untuk tombol misalnya : tombol1), box-shadow, gradient, background-color, border-radius, font-family, text-shadow, hover dll.
- Klik button atau tombol yang dihasilkan, maka di bawahnya akan tersedia file CSS dari hasil pengaturan sebelumnya.
- Copy kode CSS tersebut, dan masukkan ke dalam file CSS yang anda gunakan di blog/web. Contoh :
.tombol-download1 { -moz-box-shadow:inset 0px 1px 6px 1px #f0b0aa; -webkit-box-shadow:inset 0px 1px 6px 1px #f0b0aa; box-shadow:inset 0px 1px 6px 1px #f0b0aa; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad716a), color-stop(1, #ce0100) ); background:-moz-linear-gradient( center top, #ad716a 5%, #ce0100 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ad716a', endColorstr='#ce0100'); background-color:#ad716a; -moz-border-radius:19px; -webkit-border-radius:19px; border-radius:19px; border:2px solid #9e524c; display:inline-block; color:#ffffff; font-family:Comic Sans MS; font-size:21px; font-weight:bold; padding:12px 61px; text-decoration:none; text-shadow:1px 1px 11px #e8bf1c; }.tombol-download1:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #ad716a) ); background:-moz-linear-gradient( center top, #ce0100 5%, #ad716a 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#ad716a'); background-color:#ce0100; }.tombol-download1:active { position:relative; top:1px; }
- Tambahkan kode HTML berikut ini (contoh) ke dalam postingan di mana tombol tersebut akan ditampilkan (harus dalam mode HTML).
<a class="tombol-download1" href="url sumber file download">Free Download</a>
Berikut ini beberapa contoh tombol download (button) yang dibuat dengan CSS generator (untuk tombol ke 3 sudah dimodifikasi) :
Wah tambah mantep aja ne mas alwi… Coba cek ke tkp dulu mas
Reply
nah kalo ini jelas mas.
trims.
Reply
Jadi sentilan juga nih untuk belajar dan memperdalam CSS… :D
Reply
Tanpa paham css langsung ambil kodenya ya mas.. manteb nih ilmunya…
Reply
Ini memang cara paling mudah untuk membuat button dengan CSS bang Alwi, banyak sekali tool gratis untuk membuat button seperti ini, tetapi meski menggunakan tool tersebut alangkah baiknya tidak asal kopas kode-nya saja, sebaiknya dipahami dengan seksama, dengan demikian kita juga bisa memahami bagaimana membuat button hanya dengan CSS :)
Reply
thanks sudah share mas alwi.
Reply
Langsung saya coba mas. Matur nyuwun.
Reply
langsung praktek saja ni.. suwun :)
Reply
Lumayan nih, coba dulu ya!.
Reply
test koment versi mobile, error apa tidak?
Reply