Cara Membuat Tombol Gradasi dengan CSS3 - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 7/02/2013 07:39:00 PM Cara Membuat Tombol Gradasi dengan CSS3 Cara Membuat Tombol Gradasi dengan CSS3

Cara Membuat Tombol Gradasi dengan CSS3

Oleh. Kang Rian  •  20  •      Edit
Cara Membuat Tombol Gradasi dengan CSS3
Cara Membuat Tombol Gradasi dengan CSS3
css3 button icon jpgPada 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

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

       

20 komentar

  1. wah mantap koleksina kang... makasih kripiknya keterima
    :thumbup

    BalasHapus
    Balasan
    1. hehehe , muhun sok mangga raosan atuh .. mumpung haneut keneh kang :cendol

      Hapus
    2. bandungna mana kang.. sekedar saran gimana kalau di widget, komentar kang rian tidak usah di munculkan, jadi didominasi sendiri, kecuali di https://rian-nurherdian.blogspot.com/p/komentar-sahabat.html
      :cool

      Hapus
    3. bandung na ti pasir koja simkuring kang :malu , waduh ! gimana itu cara nya kang :capedeh supaya user saya nya gak muncul?

      Hapus
    4. disinih sajah : http://blog.kangismet.net/2012/05/menyembunyikan-komentar-admin-pada.html

      Hapus
    5. menuju TKP kaaaang !! :ngacir ... HATUR NUHUUUUNNN ...

      Hapus
  2. satu lagi kang... naha code teu nganggo PRE, asa kurang endah nganggo blockquote :sorry

    BalasHapus
    Balasan
    1. hehe , muhun kang males nga parse ! :mewek

      insha allah , postingan selanjut na ngangge kang ! .. nuhun kang tos komentar :shakehand

      Hapus
  3. mantap kang, izin sedot ah. heheh.
    kasih cendoooll, lumayan buat ta'jil. :cendol :cendol

    BalasHapus
    Balasan
    1. silahkan gaan ! , thanks cendolnya :shakehand

      Hapus
  4. kereun euy kang. abi nuju milarian tutor ieu... sae pisan lah. manfaat elmu na

    BalasHapus
  5. mantap...keren tipsnya Kang :) ijin praktek .

    BalasHapus
  6. bagus nih kang rian.. :) wew ada mode malamnya nih :D

    BalasHapus
  7. Komplit kang, dari kecil sampai gede...
    Wih blog'nya makin jreng, ada mode siang malam...

    BalasHapus
  8. gak capek tuh tangan ya? serasa saya bakal kriting tuh jari buat postingan seperi ini hehe :2thumbup

    BalasHapus
  9. udh di ganti ya kang ?
    dlu bkan bgini.

    BalasHapus
  10. Keren nih tombolnya :2thumbup

    BalasHapus
  11. cicip dulu :ngacir

    BalasHapus
  12. Compartes mucho contenido de calidad, te seguirΓ© en Facebook, aunque no hablo Indonesio, no obstante, me sirve de mucho Bing Translator xD asΓ­ puedo traducir lo que escribes.

    Saludos

    BalasHapus

Terpopular! Minggu ini..

×