Membuat Design Tombol Bergaya Flat Dengan CSS

Membuat Design Tombol Bergaya Flat Dengan CSS

Selamat pagi.. pada kesempatan ini saya ingin berbagi tentang trik dan tips mendesign tombol dengan css. tombol standart yang kita buat dengan form submit atau tag <button> pada html tentunya sangat monoton sekali dan sangat tidak menarik ya. hehe . oleh karena itu di sini saya akan mencoba memberikan sedikit tips dalam cara mendesign tombol dengan menggunakan css. ada tiga cara untuk membuat design tombol bergaya flat dengan css. atau cara membuat tombol. yaitu yang pertama adalah tombol yang kita buat dengan menggunakan tag <button> pada html. contoh nya seperti berikut ini

kemudian yang kedua adalah tombol dari form. yaitu tombol submit. tombol submit sendiri hanya kita gunakan pada form saja sebagai submit dari form tersebut

dan yang ketiga kita bisa membuat tombol dari hyperlink HTML dengan menggunakan bantuan css. hyperlink pada HTML contohnya

nah untuk membuat hyperlink menjadi tombol tentu kita membutuhkan class atau id untuk membuat hyperlink pada html ini menjadi memiliki bentuk tombol dan sedikit tambahan-tambahan effect yang kita inginkan.

Pada tutorial membuat design tombol bergaya flat dengan css ini akan saya jelaskan tips dalam mendesign tombol secara step by step. dari langkah membuat warna background pada tombol, menghilangkan border, menentukan warna text pada tombol dan membuat effect seolah-olah tombol tersebut memiliki bayangan pada bagian bawahnya. tentu untuk membuat efek seperti bayangan ini kita harus memiliki turunan warna dari warna background. sehingga warna yang lebih gelap nya kita jadikan sebagai efek bayangannya. baiklah silahkan simak step by step cara membuat design tombol bergaya flat dengan css berikut ini

Cara Membuat Design Tombol Bergaya Flat Dengan CSS

saya asumsikan untuk membuat design tombol, kita sebaiknya menggunakan class jika ingin membuat seluruh tombol pada template website anda dengan design yang sama. kenapa lebih baik menggunakan class untuk membuat design tombol ? karena tombol pada html ini kan sangat banyak, ada tombol yang di buat dengan input submit form, tag button dan lain-lain. coba bayangkan jika misalnya kita ingin seluruh tombol yang ada pada template website kita menggunakan style yang sama tetapi syntax css kita pasti sangat berantakan karena ada yang memanggil tag <button>, ada juga yang memanggil input[type=”submit”] dan ada yang menggunakan a untuk memanggil element ini saat ingin di beri css kan. jadi singkat ceritanya kita buat di dalam class saja efek tombol nya. jadi untuk setiap tombol atau hyperlink yang ingin kita berikan style yang sama kita tinggal menambahkan class nya saja pada masing-masing element tersebut. contohnya seperti

pada contoh ini kita akan membuat sebuah tombol dengan hyperlink HTML. pertama kita buat dulu sebuah link dengan menggunakan tag <a>.

membuat design tombol bergaya flat dengan css

kemudian kita berikan sentuhan css nya

di sini kita menentukan warna background dengan warna biru yang agak flat. dan warna font nya berwarna putih. kemudian menghilangkan seluruh border kecuali border bawah

pada border bawah ini kita tebalkan ukuran border nya dengan ukuran 5px atau sesuai dengan keinganan teman-teman nantinya. dan berikan warna yang lebih agak gelap dari warna biru backgroundnya. anda bisa melihat jenis-jenis pilihan warna yang agak cocok di sini. atau anda bisa mencari nya sendiri sesuai dengan warna yang anda sukai dan bergaya flat tentunya.

jangan lupa juga kita menghilangkan dekorasi pada text nya agar garis bawah pada link di hilangkan

dan berikut ini adalah hasil akhir dari tombol flat sederhana yang kita buat

See the Pen ZQrodw by Malas Ngoding (@malasngoding) on CodePen.0

sekian tutorial membuat design tombol bergaya flat dengan css.