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 cornertext 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

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

Pada suatu hari, saya pergi ke BEC ditemani si Adon. 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 Adon deh yang nyari pouch buat W910i-nya. (Abis fitness dia, tapi belum mandi, jadi keringetnya kemana-mana. Set dah.)

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.

Plurk. Plurk. Plurk.

Plurk. Baru tau ada yang beginian sekitar seminggu yang lalu. Liat Kang Fajar geser-geser sesuatu di browsernya, kayak orang gak ada kerjaan. Eh, pas nyobain sendiri malah ketagihan. Padahal cuman situs satu halaman yang isinya aplikasi buat nampilin status-status yang bisa dikomentarin gitu. Yah, seperti Twitter cuman lebih asyik ini kayaknya.

Plurk

Screenshot Plurk. Bagian atasnya bisa digeser-geser.

Salah satu hal yang membuat orang terus-terusan nge-Plurk adalah, ingin ngebanyakin karma. Semakin banyak karma yang kita dapet, semakin banyak yang bisa kita lakukan di Plurk ini. Misalnya ganti judul Plurk, ganti wallpaper, nambah emoticon, dan lain-lain.

Status. Hanya sebagian kecil dari bejibun aplikasi yang ada di Facebook. Kenapa orang-orang seperti kita (kita??) bisa kecanduan sama hal-hal yang seperti ini? Entahlah, yang penting asyik, hehe.

FYI: orang disamping saya lagi sibuk nge-Plurk.

9 Amazing Pics from Airliners.net

Tadi pagi jam 7 saya ada kulyah Proses Manufaktur. Kulyah yang membuat mata lelah, pikiran melayang ke hal-hal yang lain, ditemani sayup-sayup suara dosen yang berbicara mengenai apa yang ada di slide presentasinya.

Eh, tapi di tengah perkulyahan, dosennya ingin bercerita tentang foto-foto yang ada di milis yang dia ikutin. Katanya sih foto-foto itu dateng dari temen-temennya yang didikan PT Dirgantara Indonesia (DI). Saat melihat foto-foto tersebut dengan cermat, terdapat tulisan Airliners.net.

Abis kulyah, saya makan deh. Abis makan, di sela-sela pengerjaan proyek baru, saya iseng membuka situs yang ada di foto tadi. Dan wow, seru juga ini situsnya. Kita bisa liat foto-foto yang diambil oleh fotografer yang terdaftar di situs tersebut. Kayaknya mereka fokus di dunia perfotoan pesawat deh, hehe. Dari situs tersebut saya ambil beberapa foto yang saya sukai. Beribu-ribu foto lainnya bisa dilihat di situs aslinya. Now check these out.

Virgin Airlines

Pesawat di salju (??)

Jet Plane

Gimana caranya bisa sampe kayak gini?

Love Plane

Love. Love is everywhere. ^__^

Vertical Airplane

Gimana rasanya naek pesawat kayak gini? Bukannya stall ya?

Tiga foto berikut memiliki tema yang sama. Landing yang menegangkan. Kata dosenku (Pak Sigit) sepertinya akan sulit kalau Indonesia ingin bisa kayak gini.

Landing Plane - 1

Dekat dengan pantai. Dekat dengan manusia.

Landing Plane - 2

Dekat dengan jalan raya. Dekat dengan mobil.

Landing Plane - 3

Dekat dengan pantai. Dekat dengan manusia.

Aurora Plane

Subhanallah

Garuda Indonesia

Garuda Indonesia at Ngurah Rai