Home » CSS » Free CSS Button Generator

Free CSS Button Generator

2 Agu. 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. Modifikasi Tampilan Halaman Daftar Isi
  2. Cara Mengganti Font Dalam Postingan
  3. Membuat Menu Navigasi Dengan CSS3
  4. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  5. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  6. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  7. Custom CSS Per Post
  8. Yesterday, The Beatles
  9. Menggulingkan Top Komentator
  10. Mempercantik Tampilan Code Snippets Dengan CSS
  1. 2-8-2012 at 21:43 | #1

    Wah tambah mantep aja ne mas alwi… Coba cek ke tkp dulu mas

    Reply

  2. 4-8-2012 at 00:08 | #2

    nah kalo ini jelas mas.
    trims.

    Reply

  3. 4-8-2012 at 12:37 | #3

    Jadi sentilan juga nih untuk belajar dan memperdalam CSS… :D

    Reply

  4. 4-8-2012 at 17:31 | #4

    Tanpa paham css langsung ambil kodenya ya mas.. manteb nih ilmunya…

    Reply

  5. 7-8-2012 at 05:53 | #5

    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

  6. 12-8-2012 at 10:37 | #6

    thanks sudah share mas alwi.

    Reply

  7. 10-9-2012 at 19:35 | #7

    Langsung saya coba mas. Matur nyuwun.

    Reply

  8. 14-11-2012 at 21:25 | #8

    langsung praktek saja ni.. suwun :)

    Reply

  9. 5-7-2013 at 10:02 | #9

    Lumayan nih, coba dulu ya!.

    Reply

  10. 13-11-2013 at 08:55 | #10

    test koment versi mobile, error apa tidak?

    Reply

Comment pages
5+9=? (Wajib diisi)