Cara Membuat Tombol Gradasi dengan CSS3

Your Ads Here

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

Your Ads Here

Your Ads Here

Your Ads Here

Your Ads Here