Membuat Button Dengan CSS

Transkripsi

1 Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple tapi dengan jawaban yang rumit. Ada banyak cara untuk menjawab pertanyaan ini dan sayangnya banyak juga cara yang salah. Pada saat pertama saya belajar menggunakan CSS, dan mencari tau sedikit banyak tentang sintaks dari masalah yang saya hadapi membuat saya semakin sadar, sepertinya hampir semua yang saya lakukan itu salah. Hari ini kita akan pelajari secara bertahap langkah langkah yang simple dan fleksibel yang dapat anda praktekan dalam pembuatan button. Dan yang lebih penting lagi hasil akhirnya adalah anda mendapatkan penjelasan lebih dalam di setiap point yang akan kita lakukan. Langkah 1: HTML Percaya atau tidak langkah pertama ini adalah langkah yang tricky. Bagi coder yang berpengalaman mungkin ini adalah langkah yang mudah, tapi bagi para pemula untuk mengetahui dari mana langkahnya untuk memulai pembuatan button sendiri adalah hal yang cukup sulit. Apakah harus menggunakan tag <button> pada HTML? atau mungkin menggunakan tag <p>? Tag mana yang lebih cocok untuk dijadikan tombol pada HTML? Kebanyakan coder menggunakan langkah yang simple dan paling banyak di pakai yaitu dengan menggunakan tag <a> (jika pada form biasanya menggunakan <input> ). Dilihat dari sudut fungsionalitas, yang akan kita buat adalah sebuah link yang ketika di klik akan membawa user ke halaman lain yang merupakan fungsi dasar dari sebuah link. Seringkali pada web design, pilihan untuk merubah sesuatu kedalam bentuk button adalah hanya sebuah estetika dan tidak perlu menunjukan fungsi yang khusus. Ini adalah snippet HTML yang paling sering digunakan untuk membuat sebuah tombol dengan sempurna tapi tetap indah dan singkat : <a href=" class="button">click Me</a> Jika anda tidak membutuhkan <div>, maka jangan gunakan Masalah yang muncul saat saya pertama kali memulai coding adalah saya sering menggunakan <div> dalam membuat apapun, anda mengerti? Apapun. Dengan logika yang cacat ini saya mulai dengan memasukan tag <a> kedalam tag <div> dan mulai memasukan sebagian style ke tag <div> tersebut. Ini adalah hal yang tidak perlu dan dapat menimbulkan masalah pada saat anda klik atau hover pada button tersebut. Pada contoh diatas, semua element yang kita buat hanyalah sebuah tag <a>. Jika anda memasukan tag tersebut kedalam tag <div> lalu melakukan styling pada tag <div> tersebut akan membuat bagian teks dari link tersebut yang bisa di klik atau hover, artinya user tidak akan mendapatkan hasil apa apa jika melakukan klik pada button buatan

2 anda karena seharusnya user melakukan klik tepat pada teksnya, hal ini tentunya menjadi suatu kekurangan besar pada website yang anda buat. Kenapa menggunakan class? Mungkin fungsi paling penting yang anda sadari tentang code snippet ini adalah kita menambahkan class pada tag <a> tersebut, dengan value button. Ada beberapa alasan untuk ini. Pertama, kita harus memberikan style pada tag ini tanpa harus menargetkan pada semua tag <a> yang ada pada halaman. Sudah sangat pasti anda tidak ingin semua link menjadi button yang identik satu sama lain. Lagipula, sudah tentu anda ingin menggunakan style button ini berulang kali dalam halaman yang sama. Untuk alasan inilah kita menggunakan class daripada menggunakan ID. Dengan begitu, kapanpun anda ingin merubah teks biasa menjadi sebuah button anda cukup menambahkan class button pada tag HTML tersebut. Preview langkah pertama : Langkah 2: Style Dasar Pada Button Sekarang kita sudah memiliki tag HTMLnya dan siap untuk melanjutkan ke langkah berikutnya yaitu CSS. Anda harus ingat kita membuat class button untuk styling semua link menjadi button. Jadi langkah pertama kita adalah menyiapkan code untuk CSS seperti di bawah ini : /* Code Here */ Hal pertama yang ingin kita lakukan pada CSS ini adalah mendefinisikan kotak dasar yang akan kita buat menjadi bentuk button. Ini adalah langkah langkah style yang saya gunakan. Sebagai

3 catatan ukuran dan warna ini adalah pilihan saya yang merupakan sepenuhnya hak anda untuk menggantinya sesuai dengan kebutuhan anda. Hal yang paling penting yang saya lakukan disini dan harus anda perhatikan adalah men-set display dengan value block. Ini akan membuat link anda bisa menjadi box yang ukurannya di perbesar tergantung dari lebar dan tinggi yang anda masukan. Setelah itu silahkan masukan ukuran dan warna dasar yang akan anda gunakan, lalu tambahkan border. Saya lebih menyarankan anda menggunakan rgba tapi jika anda ingin membuat code yang lebih bersahabat dengan browser lama, anda bisa melihat artikel ini untuk membuat fallback bagi code rgba anda. Preview Langkah 2 Langkah 3: Style Teks Selanjutnya adalah merubah teks yang tampil dengan buruk tadi ke bentuk yang lebih baik. Untuk memastikan anda dapat mengikuti perubahan pada setiap langkah, saya akan tetap menampilkan code yang di buat di langkah sebelumnya dengan di batasi komentar sehingga anda tahu posisi setiap langkah.

4 /*Langkah 2: Style Dasar Pada Button*/ /*Step 3: Style Teks*/ color: rgba(0, 0, 0, 0.55); text-align: center; font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; /*Step 3: Style Link*/ a text-decoration: none; Disini anda dapat melihat saya menambahkan warna yang sama dengan warna dasar namun lebih gelap pada teks. Trik ini dicapai dengan menetapkan warna teks hitam dan mengurangi opacity melalui RGBA. Selanjutnya, teks saya buat ditengah dengan text-align dan memberikan beberapa style dengan menggunakan atribut font. Preview langkah 3: Langkah 4: Style CSS3 Langkah sebelumnya mengantarkan kita ke bentuk button yang masih lebih baik dari sebelumnya. Sayangnya bentuk ini sangat membosankan. Bagian yang terpenting adalah tombol ini harus dapat tampil sempurna di semua browser besar, jadi sekarang kita akan menambahkan beberapa style CSS baru yang sangat menarik tapi tanpa rasa khawatir dengan tampilan yang

5 buruk di browser lama. Pada dasarnya, saya tidak peduli jika IE jika button saya tidak tampil baik di IE tapi setidaknya button saya bisa menampilkan sebagian besar stylenya pada IE tanpa mengurangi bentuk yang signifikan. Anda dapat menambahkan berpuluh puluh baris kode untuk membuat button anda tampak mewah dan indah, tapi saya tetap akan membuatnya simple untuk sekarang. /*Langkah 2: Style Dasar Pada Button*/ /*Step 3: Style Teks*/ color: rgba(0, 0, 0, 0.55); text-align: center; font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; /*Step 4: Style CSS3*/ background: linear-gradient(top, #34696f, #2f5f63); border-radius: 50px; box-shadow: 0 8px 0 #1b383b; text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); /*Step 3: Style Link*/ a text-decoration: none; Setiap bagian code ini terkadang bisa menjadi tricky jadi mari kita coba perhatikan satu persatu. Pertama, saya menambahkan gradient yang akan menampilkan warna yang diberikan sebagai bayangan yang lebih gelap. Saya menambahkan atribut warna dasar diatasnya sebagai fallback. Selanjutnya adalah border radius. Saya memutuskan untuk membuat tombol ini memiliki sudut yang elipse dengan menggunakan border radius. Yang terakhir adalah shadow. Saya memberikan sedikit shadow baik pada box atau teksnya. Untuk box, saya memberikan shadow dengan vertical offset saja tanpa yang horizontal. Ini akan memberikan efek 3D yang tidak harus menggunakan code panjang. Untuk text shadow, saya juga menambahkan vertical offset dan mengatur warnanya menjadi putih dengan opacity 20%. Ini adalah cara yang paling mudah untuk membuat efek seolah olah teks tenggelam kedalam tombol. Gunakan Prefixr Untuk Browser Prefixes

6 Ingat code diatas tidak semuanya compatible dengan beberapa browser. Pada tahap awal, saya sangat malas mencoba dan membuat kode saya berjalan di banyaknya browser yang ada dengan menggunakan browser prefixes, dan seringkali saya lupa code yang harus seharusnya dimasukan itu apa. Setelah saya yakin dengan tampilan yang saya buat ini, saya dapat menggunakan tool bernama Prefixr untuk memprosesnya dan menyempurnakan code saya jika ada kesalahan tampilan di browser lain. /*Langkah 2: Style Dasar Pada Button*/ /*Step 3: Style Teks*/ color: rgba(0, 0, 0, 0.55); text-align: center; font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; /*Step 4: Style CSS3*/ background: -webkit-linear-gradient(top, #34696f, #2f5f63); background: -moz-linear-gradient(top, #34696f, #2f5f63); background: -o-linear-gradient(top, #34696f, #2f5f63); background: -ms-linear-gradient(top, #34696f, #2f5f63); background: linear-gradient(top, #34696f, #2f5f63); -webkit-border-radius: 50px; -khtml-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: 0 8px 0 #1b383b; -moz-box-shadow: 0 8px 0 #1b383b; box-shadow: 0 8px 0 #1b383b; text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); /*Step 3: Style Link*/ a text-decoration: none; Preview langkah 4

7 Step 5: Style Hover Langkah terakhir dari pembuatan button ini adalah mendefinisikan style untuk mouse hover pada button anda. Pada saat user meletakan kursor mouse diatas button anda akan lebih baik jika menampilkan sedikit efek yang membuat tampilan button anda berbeda bukan hanya sekedar perubahan bentuk kursor mouse saja. Sekali lagi, kita dapat membuat ini menjadi simple dan dengan sedikit kode. /*Langkah 2: Style Dasar Pada Button*/ /*Step 3: Style Teks*/ color: rgba(0, 0, 0, 0.55); text-align: center; font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; /*Step 4: Style CSS3*/ background: -webkit-linear-gradient(top, #34696f, #2f5f63); background: -moz-linear-gradient(top, #34696f, #2f5f63); background: -o-linear-gradient(top, #34696f, #2f5f63); background: -ms-linear-gradient(top, #34696f, #2f5f63); background: linear-gradient(top, #34696f, #2f5f63); -webkit-border-radius: 50px; -khtml-border-radius: 50px; -moz-border-radius: 50px;

8 border-radius: 50px; -webkit-box-shadow: 0 8px 0 #1b383b; -moz-box-shadow: 0 8px 0 #1b383b; box-shadow: 0 8px 0 #1b383b; text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); /*Step 3: Style Link*/ a.button2 { text-decoration: none; /*Step 5: Style Hover*/ a.button:hover { background: #3d7a80; background: -webkit-linear-gradient(top, #3d7a80, #2f5f63); background: -moz-linear-gradient(top, #3d7a80, #2f5f63); background: -o-linear-gradient(top, #3d7a80, #2f5f63); background: -ms-linear-gradient(top, #3d7a80, #2f5f63); background: linear-gradient(top, #3d7a80, #2f5f63); Sekarang jika anda meletakan kursor mouse diatas button anda maka warna dari button anda akan berubah. Ini merupakan efek yang simple tapi cukup untuk membuat user sadar dengan perubahan tersebut bahkan jika mereka buta warna. Selesai Setelah langkah kelima, anda selesai. Anda seharusnya melihat tombol yang cantik dibuat sepenuhnya menggunakan CSS dan HTML. Tapi yang lebih penting adalah anda mendapatkan pengetahuan dasar tentang alur yang harus di lewati untuk membuat sebuat button dengan CSS.

9