Cara Membuat Tombol Gradasi dengan CSS3

Pada postingan ini saya akan memberitahukan Bagaimana Cara Membuat Tombol Gradasi dengan CSS3 .. dikarenakan ada sahabat blogger yang langsung bertanya kepada saya , bagaimana Cara Membuat Tombol simple seperti ini tanpa latar belakang background gambar ? Contoh Tombol / Button dengan CSS3 dan di sini saya akan memberikan beberapa pilihan warna tombol yang elegant ..

Cara Memasang Tombol Gradasi dengan CSS3 :

1. Simpan Kode CSS3 External dibawah ini sebelum kode </head>

<link rel="stylesheet" href="http://kangrian14.googlecode.com/svn/css/kr_button.css" type="text/css"/>

2. Cara Memasang / Memanggil Tombol ke HTML :

Untuk Warna Silver :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small">Tombol Kecil</a>
<a href="#" class="kr_button">Tombol Standar</a>
<a href="#" class="kr_button large">Tombol Besar</a>
<a href="#" class="kr_button small rounded">Kecil & Bulat</a>
<a href="#" class="kr_button rounded">Bulat Standar</a>
<a href="#" class="kr_button large rounded">Besar & Bulat</a>

Untuk Warna Abu Tua :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small grey">Tombol Kecil</a>
<a href="#" class="kr_button grey">Tombol Standar</a>
<a href="#" class="kr_button large grey">Tombol Besar</a>
<a href="#" class="kr_button small rounded grey">Kecil & Bulat</a>
<a href="#" class="kr_button rounded grey">Bulat Standar</a>
<a href="#" class="kr_button large rounded grey">Besar & Bulat</a>

Untuk Warna Hitam :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small black">Tombol Kecil</a>
<a href="#" class="kr_button black">Tombol Standar</a>
<a href="#" class="kr_button large black">Tombol Besar</a>
<a href="#" class="kr_button small rounded black">Kecil & Bulat</a>
<a href="#" class="kr_button rounded black">Bulat Standar</a>
<a href="#" class="kr_button large rounded black">Besar & Bulat</a>

Untuk Warna Biru Muda :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small light_blue">Tombol Kecil</a>
<a href="#" class="kr_button light_blue">Tombol Standar</a>
<a href="#" class="kr_button large light_blue">Tombol Besar</a>
<a href="#" class="kr_button small rounded light_blue">Kecil & Bulat</a>
<a href="#" class="kr_button rounded light_blue">Bulat Standar</a>
<a href="#" class="kr_button large rounded light_blue">Besar & Bulat</a>

Untuk Warna Biru :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small blue">Tombol Kecil</a>
<a href="#" class="kr_button blue">Tombol Standar</a>
<a href="#" class="kr_button large blue">Tombol Besar</a>
<a href="#" class="kr_button small rounded blue">Kecil & Bulat</a>
<a href="#" class="kr_button rounded blue">Bulat Standar</a>
<a href="#" class="kr_button large rounded blue">Besar & Bulat</a>

Untuk Warna Hijau :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small green">Tombol Kecil</a>
<a href="#" class="kr_button green">Tombol Standar</a>
<a href="#" class="kr_button large green">Tombol Besar</a>
<a href="#" class="kr_button small rounded green">Kecil & Bulat</a>
<a href="#" class="kr_button rounded green">Bulat Standar</a>
<a href="#" class="kr_button large rounded green">Besar & Bulat</a>

Untuk Warna Kuning :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small yellow">Tombol Kecil</a>
<a href="#" class="kr_button yellow">Tombol Standar</a>
<a href="#" class="kr_button large yellow">Tombol Besar</a>
<a href="#" class="kr_button small rounded yellow">Kecil & Bulat</a>
<a href="#" class="kr_button rounded yellow">Bulat Standar</a>
<a href="#" class="kr_button large rounded yellow">Besar & Bulat</a>

Untuk Warna Oranye :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small orange">Tombol Kecil</a>
<a href="#" class="kr_button orange">Tombol Standar</a>
<a href="#" class="kr_button large orange">Tombol Besar</a>
<a href="#" class="kr_button small rounded orange">Kecil & Bulat</a>
<a href="#" class="kr_button rounded orange">Bulat Standar</a>
<a href="#" class="kr_button large rounded orange">Besar & Bulat</a>

Untuk Warna Merah :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small red">Tombol Kecil</a>
<a href="#" class="kr_button red">Tombol Standar</a>
<a href="#" class="kr_button large red">Tombol Besar</a>
<a href="#" class="kr_button small rounded red">Kecil & Bulat</a>
<a href="#" class="kr_button rounded red">Bulat Standar</a>
<a href="#" class="kr_button large rounded red">Besar & Bulat</a>

Untuk Warna Merah Muda :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small purple">Tombol Kecil</a>
<a href="#" class="kr_button purple">Tombol Standar</a>
<a href="#" class="kr_button large purple">Tombol Besar</a>
<a href="#" class="kr_button small rounded purple">Kecil & Bulat</a>
<a href="#" class="kr_button rounded purple">Bulat Standar</a>
<a href="#" class="kr_button large rounded purple">Besar & Bulat</a>

Untuk Warna Ungu :

Tombol Kecil Tombol Standar Tombol Besar Kecil & Bulat Bulat Standar Besar & Bulat

Kode nya :

<a href="#" class="kr_button small pink">Tombol Kecil</a>
<a href="#" class="kr_button pink">Tombol Standar</a>
<a href="#" class="kr_button large pink">Tombol Besar</a>
<a href="#" class="kr_button small rounded pink">Kecil & Bulat</a>
<a href="#" class="kr_button rounded pink">Bulat Standar</a>
<a href="#" class="kr_button large rounded pink">Besar & Bulat</a>

Semoga Bermanfaat! Keep Enjoy & Happy Blogging sobb ^-^ ..

Re-Source : http://www.dreamtemplate.com/dreamcodes/documentation/gradient_buttons.html