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 :

.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#ededed;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}

• Tambahkan kode HTML berikut ini  ke dalam postingan, di mana tombol tersebut akan ditampilkan (harus dalam mode HTML).

<a href="#" class="classname">my button</a>

Source: http://m-alwi.com/

Anda baru saja membaca artikel yang berkategori Blogger / CSS dengan judul CSS Button Generator . Anda bisa bookmark halaman ini dengan URL http://klikdul.blogspot.com/2012/09/css-button-generator.html . Terima kasih!

Ditulis oleh: ortega -