Uncategorized – Alanisalan

Edit: Posting ini adalah duplikat.

ombol memiliki fungsi yang sangat banyak dalam pembuatan situs. Akui saja, kita dapat menemukan tombol hampir di semua situs yang kita kunjungi. Dengan adanya propertibackground-image pada CSS, kita dapat membuat bentuk apapun yang kita inginkan untuk sebuah tombol. Mulai dari tombol dengan satu warna, dengan gradient, sampai dengan tombol yang memiliki bentuk yang tidak kotak (rectangle). Lebih jauh lagi, perilaku atau behaviour dari tombol yang kita buat pun dapat kita definisikan sendiri melalui penggunaan pseudo-selector :hover dan :active. Menarik bukan?

CSS3–Oh–Yeah

Lebih menarik lagi, CSS versi terbaru memungkinkan web designer membuat tombol yang tidak memerlukan gambar sama sekali. Kita dapat mengambil keuntungan dari adanya fitur-fitur baru yang ada pada CSS3.

1. Hanya menggunakan CSS tanpa bantuan dari Javascript

Pada awalnya, pembuatan gradient dan rounded corner pada desain situs memerlukan bantuan dari Javascript untuk mencapainya. Sekarang, CSS3 memiliki fungsi untuk membuat gradient, rounded corner, bahkan drop shadow.

2. Lebih baik pada sisi maintainability

Kita dapat mengubah ukuran atau warna hanya dengan mengubah deklarasi properti dari tombol yang dibuat. Jika bekerja dengan lebih dari satu developer, mereka tidak perlu membuka Photoshop, mengubah warna, dan meng-convert gambar hanya untuk mengganti warna dari tombol yang bersangkutan.

3. Meminimalkan ukuran halaman

Katakan kita ingin membuat tombol yang sangat terkostumisasi (gradient, rounded corner, fluid, dst.). Yang kita butuhkan adalah trik-trik seperti gradient dengan Photoshop, CSS sliding door, dan markup HTML yang hanya ditujukan untuk pembuatan tombol tersebut. Dapat dibayangkan berapa baris kode serta gambar yang dibutuhkan untuk pembuatan sebuah tombol. Dengan CSS3, hal-hal tersebut dapat dicapai dengan hanya beberapa baris kode saja!

Pembuatan Tombol

Oke, mari kita lanjutkan ke proses pembuatannya. Fitur-fitur CSS yang akan saya gunakan adalah rounded corner, gradient, serta drop shadow. Bagi Kamu yang masih baru dengan syntax-syntax baru dari CSS3, Kamu dapat mempelajari tentang rounded corner, text shadow dan box shadow, serta gradient. Teknik pembuatannya merupakan mimic dari pembuatan tombol dengan efek-efek pada Photoshop. Tanpa basa basi lagi, langsung saja kita lihat markup dan properti yang dipakai. HTML ini:

<a href="#">Klik saya!</a>

Diberi style seperti ini:

.orange_button:link, .orange_button:visited {
  background: #fec92d;
  border: 1px solid #c8990d;
  color: #a07905;
  display: block;
  font: bold 18px/18px Arial, Helvetica, sans-serif;
  text-align: center;
  text-decoration: none;
  width: 150px;

  /* rounded corners */
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;

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

  /* drop shadow */
  -webkit-box-shadow: rgba( 0, 0, 0, 0.3 ) 0px 1px 2px, 
                      inset rgba( 255, 255, 255, 0.6 ) 0px 1px 0px;
  -moz-box-shadow: rgba( 0, 0, 0, 0.3 ) 0px 1px 2px, 
                   inset rgba( 255, 255, 255, 0.6 ) 0px 1px 0px;
  box-shadow: rgba( 0, 0, 0, 0.3 ) 0px 1px 2px, 
              inset rgba( 255, 255, 255, 0.6 ) 0px 1px 0px;

  /* gradient */
  background-image: -webkit-gradient(
    linear, 0 0, 0 100%,
    from( #ffd65e ),
    to( #febf04 )
  );
  background-image: -moz-linear-gradient(
    #ffd65e,
    #febf04
  );
}

.orange_button:hover {
  background: #fdce45;
  background-image: -webkit-gradient(
    linear, 0 0, 0 100%,
    from( #fdda75 ),
    to( #fdc41d )
  );
  background-image: -moz-linear-gradient(
    #fdda75,
    #fdc41d
  );
}

.orange_button:active {
  background: #fdce45;
}

Wow, tampaknya dibutuhkan cukup banyak baris untuk membuat satu buah tombol ya… Tapi jangan salah, beberapa baris tersebut masih memiliki ukuran yang lebih kecil daripada beberapa gambar yang dibutuhkan untuk tombol dengan tiga kondisi (:link, :hover, dan :active). Jangan lupa untuk melihat demo dari tombol yang telah dibuat. Tentu saja, Internet Explorer hanya akan dapat melihat properti yang hanya menjadi spesifikasi CSS2. Gradient juga belum tersedia untuk Opera.

Gaya yang Paling Saya Pilih

Perilaku dari tombol yang kita buat dapat kita atur sendiri. Pada dasarnya (dan biasanya), tombol adalah sebuat link atau button yang diberi properti khusus agar terlihat seperti sebuat tombol. Tombol yang baik tentu saja akan membuat orang yang melihatnya merasa ‘gatal’ untuk menekan tombol tersebut, serta berfungsi dengan perilaku yang intuitif. Tombol yang paling saya suka adalah tombol yang menarik ketika di-hover dan di-tekan. Pada contoh berikut, tombol yang dibuat akan memiliki warna yang lebih terang ketika di-hover, lalu bergerak sedikit ketika di-tekan.

Eits, tidak hanya sampai di sini. Kita masih dapat menambah enhancement tombol dengan sedikit animasi berikut:

.animated {
  background-image: none;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.animated:hover {
  background-color: #ffd762; 
}

.animated:active {
  background-color: #fdce45;
}

Demo dapat dilihat di sini.

Animasi tersebut sudah tersedia pada browser Webkit, Gecko 2, dan Presto 2.3. Sayangnya, animasi belum bisa diterapkan pada elemen yang telah memiliki gradient.

Selamat bersenang-senang dengan tombol CSS!

Category: Uncategorized

12.12.12 Hari i…

Membuat Tombol Fungsional dengan CSS