Membuat Tombol Menarik dengan CSS3

CSS, sangat berguna sekali pada materi web design, apalagi pada perkembangan baru-baru ini, nah untuk menambah skill kita di CSS, rieztoshare posting tentang cara membuat tombol dengan CSS3, ya walaupun artikel bukan punya saya asli, apa salahnya sih kita share, hehehe....
Ouke, yuk kita ikuti artikelnya.

Apa yang menarik dengan Tombol ini?

1. 100% CSS, tanpa Image ataupun Javascript.
2. Fasilitas Gradient didukung oleh berbagai browser (IE, Firefox 3.6, Chrome, and Safari).
3. Fleksibel dan scalable. ukuran dan lengkungan tombol dapat disesuaikan dengan mengubah ukuran font dan nilai padding.
4. Memiliki 3 state, yaitu Normal, Hover dan Active.
5. Dapat diimplementasikan pada berbagai element HTML, diantaranya: a, input, button, span, div, p, h3, dsb.
6. Jika browser tidak mendukung CSS3 tombol akan tetap akan tampil, tapi hanya akan tampil dengan style standard tanpa gradient dan lengkungan.

Tampilan pada berbagai BrowserPada gambar di bawah ini, dapat dilihat perbedaan tampilan pada beberapa browser yang mendukung CSS3, yang mendukung sebagian, dan yang tidak mendukung sama-sekali.

Status Tombol

Tombol CSS3 ini mendukung 3 state/status. yaitu:

1. Normal state = Ketika tombol ini normal.
2. Hover = Ketika tombol ini di dekati oleh mouse.
3. Active = Ketika tombol ini mendapatkan focus atau di klik.

Berikut adalah contoh tampilan dari tombol CSS3 berdasarkan status/state tombol tersebut:

Styles Umum Untuk Tombol Ini
Kode berikut adalah style umum untuk class button yang nantinya dapat dipergunakan pada element HTML dan dikombinasikan dengan class-class lainnya.

.button {      display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

Style untuk Gradiasi
Kode di bawah ini adalah CSS styling untuk tombol berwarna oranye yang akan diberi nama dengan class orange. Baris pertama adalah latar belakang untuk browser non-CSS3, baris kedua adalah untuk browser WebKit, baris ketiga adalah untuk Firefox, dan baris terakhir adalah filter gradient yang hanya dibaca oleh Internet Explorer.

orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Bagaimana menggunakannya dalam HTML?
Mari kita umpamakan Anda ingin menggunakan Tombol yang berwarna Biru. Maka langkah-langkah yang perlu Anda lakukan adalah dengan Mendownload Script CSS di Bawah Ini Terlebih Dahulu:

Tombol CSS3.zip 

 Dalam file zip tersebut terdapat tombol.css yang dapat dimasukkan ke dalam HTML atau dapat juga di link dengan cara seperti berikut:

<!-- Tambahkan Link ke CSS untuk Tombol CSS3 -->
<link href="tombol.css" rel="stylesheet" type="text/css" />

Setelah menambahkan tag di Atas, Kita dapat menyisipkan class untuk Element-element HTML yang ingin dijadikan tombol. Misalnya Tag # yang ingin dijadikan menjadi tombol berwarna biru, maka kode yang harus digunakan adalah sebagai berikut :

<a href="#" class="button blue">Ini Tombol Biru</a>

Nah Mudah kan?. Pada file di Atas pun terdapat contoh.html yang dapat dijadikan referensi penggunaan tombol.css. Berikut adalah tampilan contoh.html yang akan Anda dapatkan bila Anda menggunakan Firefox versi terbaru:

Bagaimana sob? tertarik untuk mencoba? silakan saja sob, selain praktis tips ini juga lumayan mudah untuk dicoba.
Sekian dulu web design kali ini ya sobat, semoga bermanfaat dan termakasih...

Sumber : http://www.rieztoshare.com/