Membuat Tombol Fungsional dengan CSS

Edit: Posting ini adalah duplikat.

T 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!

Ini Gila Ini Windows

Pengalaman alan Windows nya hang.

M emang ya Microsoft Windows itu suka ngga stabil kalau di-installnya udah agak lama. Berdasarkan pengalaman-pengalaman yang telah saya alami, si Windows ini memang suka ngabisin RAM yang semakin banyak sejak waktu instalasi.

Kalau nge-hang pas lagi gak ada kerjaan sih, santai kayak di pantai. Tinggal install ulang langsung fresh lagi. Ini lagi diburu-buru kerjaan, masih bandel juga. Padahal saya cuman nyalain Mozilla Firefox, XAMPP, CorelDRAW X4, Corel PHOTO-PAINT X4, Windows Explorer (4 biji), YM, WinSCP, Notepad (2 biji), dan tak ketinggalan Task Manager. Oh iya, ditambah widget Google Desktop dan Rocket Dock. Untuk laptop saya yang punya RAM 1,4 GB, seharusnya ringan-ringan aja kan. Nah, ini malah menggila dengan aktivitas CPU 77% ditemani virtual memory sampai 1,46 GB. Sekali lagi, gila.

My Desktop
Alamak. Bikin naik darah aja.

Saya bayangin kalau misalnya Ps, Ai, dan Dw di-aktifin. Kayaknya bakalan meledak ini laptop, haha (lebai).

Sebenernya untuk sekedar browsing dan urusan senang-senang lainnya, bisa pakai Ubuntu sih. Tapi entah kenapa, Ms Windows asli versi baru dari ComLabs ini ngga bisa dipakai dual-boot. Begitu Ubuntunya di-install, si Windows-nya ngga mau start-up. Aneh. Nanti kalau udah minim kerjaan, mau pakai Linux aja ah.

IM2 Br0.0m

Artikel ini menceritakan bagaimana pengalaman saya memakai IM2 Broom unlimited dari Indosat.

Pada suatu hari, saya pergi ke BEC ditemani si pacar. Kami ke sana punya alasan masing-masing. Saya mau beli voucher perdana IM2 Broom, sedangkan dia mau beli pouch buat hapenya. Nyari-nyari di lantai sekian yang daerah jualan komputer, kalo gak dapet jawaban “Aduh mas, maaf lagi kosong”, harganya kemahalan. Huh. Akhirnya dapet voucher perdana itu di lantai sekian yang jualan hape (handphone). 150ribu.

Yap, setelah dapet, giliran si pacar deh yang nyari pouch buat W910i-nya.

Ngga sabar pengen nyobain kartu baru, di rumah langsung ganti SIMcard IM3 dengan SIMcard IM2. Eh, ngga jalan. Kenapa ya? Di voucher pack-nya sih tulisannya harus diaktifin dulu untuk bikin username dan password baru. Yowis, nunggu besok aja ngaktifinnya di kompi ComLabs biar lebih nyaman.

Pagi-pagi ke ComLabs, kompi yang paling bagus dipake si Ivan gendut. Untung kebagian kompi yang kedua bagusnya, he. Akhirnya masuk ke website-nya IndosatM2, bikin account, masukin username lanalanalan dan password *************, masukin kode aktivasi, aktif deh. Senangnya, huhu. Langsung dicoba inetnya di hape. Lemuot.

Dicoba di rumah juga, sama lemuotnya. Humm, kenapa ya? Mungkin karena jaringannya lagi jelek? Ah, masa koneksi di ITB sama di Cimahi kecepatannya sama. Sebelumnya saya pernah nyoba kartu milik si Ajay di Kopo di hape saya. Kecepatannya juga gitu, serasa GPRS. Padahal kalau pake hapenya Ajay (Nokia E71) atau modem usb, nyaman-nyaman aja.

Setelah berhari-hari menelusuri, menyelidiki, serta mempertimbangkan akhirnya hape saya sendiri yang saya vonis koneksinya lemuot. SE M600i ini ternyata 3G-nya cuman ampe 384 Kbps. Weleh. Dicoba nge-download di rumah, paling pol 5 KBps waktu malam. Siang-siang mah jangan ngarep deh.