Home » CSS » Free CSS Button Generator

Free CSS Button Generator

2 Aug. 201216 comments
Free CSS Button Generator

css button generatorFree 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

Mudah-mudahan artikel tentang Free CSS Button Generator ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Menggulingkan Top Komentator
  2. Membuat Efek Text Stroke Dengan CSS
  3. CSS3 Animation, Zoom In Zoom Out, Rotation
  4. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  5. Membuat Menu Navigasi Dengan CSS3
  6. Membuat Text Gradient Dengan CSS
  7. Cara Menggabungkan File CSS WordPress
  8. Yesterday, The Beatles
  9. CSS3, Sonic Mengejar Bola
  10. Modifikasi Tampilan Halaman Daftar Isi
  1. 22-3-2014 at 15:06 | #1

    ditunggu kelanutannya mas. Belajas css. boleh minta templatenya ga gan

    Reply

  2. 16-4-2014 at 18:58 | #2

    wah keren nih infonya sangat menarik

    Reply

  3. 24-4-2014 at 00:25 | #3

    info yang keren…mas kalao mau dialikasikan di joomla bisa gak? gimana caranya?
    thanks

    Reply

  4. 11-5-2014 at 20:12 | #4

    sangat menarik nih, sanagat ingin makan minum

    Reply

  5. 16-5-2015 at 12:41 | #5

    thanks gan ilmunya.. sangat bermanfaat

    Reply

  6. 20-10-2015 at 11:42 | #6

    mkasi banyak kang.. siap diaplikasikan

    Reply

Comment pages
1 22750
5+7=? (Wajib diisi)