Cara Membuat Tombol Menggunakan CSS3

Setelah kemarin kita belajar mengenai border-radius sekarang kita akan mencoba mengimplementasikanya ke dalam sebuah tombol. Tombol ini nantinya bisa kita aplikasikan ke dalam banyak hal, misalkan untuk membuat tombol search atau navbar dll. Membuat tombol menggunakan CSS3 sangatlah gampang dan tidak membutuhkan gambar atau JavaScript. untuk lebih jelasnya, silahkan lihat tombol - tombol yang ada di bawah ini :



Biru Merah Hitam Hijau Coklat Default

Ukuran yang Lebih Besar Default Ukuran yang Lebih Kecil

Kode CSS yang saya gunakan adalah :

.tombol {
    background: #777;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 1px;
    vertical-align: middle;
    }
.tombol span {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    display: block;
    font: bold 12px 'Arial', sans-serif;
    padding: 6px 12px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
    }
  
.tombol:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.1)));
    background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
    text-decoration: none;
    }
.tombol:active {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.2)));
    background-image: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.2));
    }
.tombol:active span {
    border-top-color: rgba(0, 0, 0, 0.2);
    }
  


.tombol.hitam { background-color: #252a2a; }
.tombol.biru { background-color: #3792c6; }
.tombol.merah { background-color: #cc2222; }
.tombol.hijau { background-color: #69a846; }
.tombol.coklat { background-color: #b6761a; }
.tombol.besar sapan { font-size: 16px;  padding: 6px 14px; }
.tombol.kecil sapan { font-size: 11px;  padding: 4px 8px; }


Kode HTML yang saya gunakan adalah :


<a class="tombol biru" href="#"><span>Biru</span></a>

<a class="tombol merah" href="#"><span>Merah</span></a>

<a class="tombol hitam" href="#"><span>Hitam</span></a>

<a class="tombol hijau" href="#"><span>Hijau</span></a>

<a class="tombol coklat" href="#"><span>Coklat</span></a>

<a class="tombol" href="#"><span>Default</span></a>



<a class="tombol besar" href="#"><span>Ukuran yang lebih besar</span></a>

<a class="tombol" href="#"><span>Default</span></a>

<a class="tombol kecil" href="#"><span>Ukuran yang lebih kecil</span></a>



Bersambung...

Untuk berlangganan
Masukan alamat email anda:

Delivered by FeedBurner

  1. wow..blog ini membahas css3 di hover seperti ini:

    .tombol:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(1, rgba(0, 0, 0, 0.1)));
    background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
    text-decoration: none;
    }


    Coba saya akan ganti sobat juga bisa mencoba:

    .tombol:hover{-webkit-box-shadow:inset 0 -10px 30px rgba(0,0,0,0.75);
    -moz-box-shadow:inset 0 -10px 30px rgba(0,0,0,0.75);
    box-shadow:inset 0 -10px 30px rgba(0,0,0,0.75);

    background:-webkit-gradient(radial, 50 30, 40, center center, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.75)));
    }

    Itu saya cobe penambahan box-shadow dengan inset jadi bayangan di dalam>>

    Lalu sebelum hover ada tambahan seperti ini
    silahkan di coba:

    /*taruh sebelum hover*/
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;

    /* text-shadow */
    -webkit-text-shadow:0 -1px 1px rgba(0,0,0,0.5);
    -moz-text-shadow:0 -1px 1px rgba(0,0,0,0.5);
    text-shadow:0 -1px 1px rgba(0,0,0,0.5);

    /* box-shadow */
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.75);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,0.75);
    box-shadow:0 5px 10px rgba(0,0,0,0.75);

    /* ini adalah perputaran */
    -webkit-transition:-webkit-box-shadow 0.2s ease-out, top 0.2s ease-out;
    -moz-transition:-moz-box-shadow 0.2s ease-out, top 0.2s ease-out;
    -o-transition:box-shadow 0.3s ease-out, top 0.2s ease-out;
    transition:box-shadow 0.3s ease-out, top 0.2s ease-out;
    }

    Itu sepertinya bagus tapi ga tau ya>.. hehehe, keep on blogging,, saya ikuti blog ini lewat feed

  2. wah keren blogger admin...
    aku blm slese nulis artikelnya dah ketahuan mau nilis apa... emang master-nya css3 indonesia...

    jd minder...

    terimakasih sudah datang ke blog aku...

    eh ketinggalan...
    masalah penggunaan inset di shadow...
    aku dah lama mencobanya di www.nuvent.co.cc tp hasilnya ada sedikit bug klo di buka pakai google chrome.. ada saran??

  3. bang hendro...
    pada saat saya coba tambahanya ternyata kok jd aneh ya??
    maaf...

    masalah penggunaan inset di shadow... ada saran??

  4. untuk komen di image galery:

    yups...bener di webkit kan? ketika di hover miring2..heheheheh,, memang saya buat seperti itu, agar pembaca dan yang membuat tahu perbedaaan dan membaca lagi di teknik animasi part1 tentang pembuatan rotate, karena jujur saya tidak memberikan full code, agar bisa di telaah sendiri jadi tidak mentah,, seperti sahabat blogger yang bisa mengutak-atik, karena kita tidak mentah mengkopi..maaf sekali lagi tutor saya lain daripada yang lain..
    untuk inset di image galery postingan saya sudah di berikan, terlihat bayangan terang di dalam, dengan background batu bata..

    pada saat mencoba tambahannya terlihat bundarkah tombolnya?
    nanti saya akan berusaha memposting tentang inset dan box-shadow, karena saya juga masih belajar nih..waktu juga kadang terbatas..
    aku mau kunjungi dulu www.nuvent.co.cc


    terima kasih sobat,, aku suka saling berbagi

  5. Sepertinya untuk efek transisi yang aneh-aneh dan berlebihan tidak bagus diterapkan pada desain blog. Tidak memberikan banyak kontribusi positif pada usabilitas, mungkin malah negatif.

    Efek easing mungkin cocok untuk mengubah warna latar tombol, misalnya:

    -webkit-transition:background .4s ease-out;

    Sepertinya itu sudah cukup

  6. Wahh Asyik Nich Para Master Lagi Kasih Pendapatnya hehhehhee......yang penting buat saya nice artikel sob hhheheee salam knl ya blogger pemula.....

Posting Komentar