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) :

Free Download Free Download

Free Download CSS Button Generator