Cara Membuat Button Berwarna Di HTML

Cara Membuat Button Berwarna Di HTML

Pada tulisan kali ini saya akan memberikan tutorial cara membuat button berwarna di HTML. Bagi kamu yang belum mengerti apa itu button, button bisa disebut juga sebagai tombol, tombol ini bisa di klik dan setelah di klik biasanya akan melakukan aksi tertentu sesuai dengan fungsi masing-masing tombol. Sebenarnya pada HTML untuk membuat button cukup mudah, kamu hanya memerlukan sebuah tag <button>Tombol</button>, dari tag tersebut akan menghasilkan sebuah tombol seperti gambar dibawah ini:

Comtoh Gambar Tombol HTML Standar

Pada contoh gambar diatas terlihat tampilan tombol HTML standar, untuk itu pada tutorial ini kita akan belajar membuat tampilan button tersebut menjadi berwarna, dan tentunya lebih menarik.

Pada tutorial ini terdapat dua cara untuk membuat button berwana yaitu dengan menggunakan tag button itu sendiri dan juga menggunakan tag anchor (<a></a>) atau bisa juga disebut link. Dari kedua ini mempunyai kelebihan masing-masing. Untuk yang menggunakan tag button digunakan tombol form yang bisa submit data, sedangkan yang menggunakan tag anchor digunakan untuk tombol yang berfungsi sebagai link (berpindah halaman). Untuk lebih jelasnya untuk cara membuat button berwarna di HTML ini silakan simak penjelasannya pada masing-masing poin dibawah ini.

Membuat Tag Button Berwarna

Pada tutorial cara membuat button berwarna di HTML pertama ini kita akan langsung tag button. Oke langsung saja silakan lihat contoh kode membuat button berwarna yang ada dibawah ini:

Silakan tulis contoh kode diatas pada Notepad++, dan simpan dengan nama sesuka kamu namun dengan format .html. Pada contoh saya menyimpannya dengan nama tombol.html. Setelah disimpan silakan buka file tersebut pada browser kesayangan kamu, pada contoh ini saya membukanya pada Google Chrome. Maka akan tampil seperti gambar dibawah ini:

Gambar Hasil Contoh Kode Membuat Button Berwarna Di HTML

Pada contoh kode diatas terdapat sebuah tag button yaitu pada baris nomor 22. Tag button tersebut memiliki atribut class=”btn_style”, atribut inilah yang digunakan CSS sebagai selector untuk manipulasi tag button tersebut menjadi berwarna.

Nah sekarang kita lihat pada kode CSS yang terdapat pada baris nomor 6 – 17. Pada kode CSS tersebut menggunakan selector class btn_style. Untuk penjelasan kode CSS tersebut silakan simak dibawah ini.

Penjelasan Kode CSS:

  • .btn_style sebagai selector kelas yang akan memilih tag HTML yang memiliki class btn_style, jika ada tag HTML yang memiliki class tersebut maka akan dipilih. Pada contoh ini tag button yang terdapat pada baris nomor 22.
  • border: 1px solid #cecece; digunakan untuk membuat border (garis batas) pada suatu elemen HTML, pada contoh ini untuk mengatur border tag button. Pada contoh kode tersebut property border memiliki 3 buah value yaitu 1px solid #cecece;. 1px digunakan untuk mengatur lebar border, solid digunakan untuk jenis border (bisa double, dashed, dll), dan #cecece digunakan untuk mengatur warna border, kode warna #cecece merupakan kode warna abu-abu agak terang. Untuk lebih jelasnya tentang border ini silakan simak di cara membuat border di css.
  • padding: 3px 10px; digunakan untuk mengatur jarak diantara konten dan border. Pada contoh ini terdapat 2 value yaitu 3px dan 10px. Value pertama 3px mengatur jarak atas 3px dan bawah sebesar 3px juga. Dan value kedua 10px mengatur jarak kanan 10px dan juga kiri 10px.
  • box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4) digunakan untuk mengatur bayangan, pada contoh ini bayangan dari button. Pada contoh tersebut memiliki 4 buah value yaitu 2px 2px 6px rgba(0, 0, 0, 0.4). Value pertama (2px) yang fungsinya untuk mengatur jarak bayangan kiri kanan. Value kedua (2px) yang berfungsi untuk mengatur jarak bayangan atas bawah. Value ketiga (6px) yang berfungsi untuk mengatur buram (blur) bayangan. Value keempat (rgba(0, 0, 0, 0.6)) yang berfungsi untuk mengatur warna bayangan, bisa diisi dengan nama warna dalam bahasa inggris atau kode warna (hexa, rgb, atau rgba color).
  • color: white; digunakan untuk mengatur tulisan menjadi warna putih, pada contoh ini digunakan untuk mengatur warna tulisan yang terdapat didalam tombol.
  • background-color: red; digunakan untuk mengatur warna background dari element HTML, pada contoh ini background dari tombol. Apabila kamu ingin menggunakan warna lain silakan ubah red menjadi nama warna yang kamu suka dalam bahasa inggris, atau kamu juga bisa menggunakan kode warna (hexa, rgb, atau rgba color). Untuk lebih jelasnya tentang property ini kamu juga bisa baca-baca penjelasannya pada tulisan mengatur background color.
  • .btn_style:hover akan memberi efek hover (ketika mouse berada pada element tersebut). Pada contoh ini akan memberi efek merubah warna border, dan box-shadow.

Dari contoh diatas kamu dapat membuat sedikit tips untuk membuat tombol berwarna sekaligus. Yaitu memisahkan property background-color ke selector lain. Dan nanti pada tag button pada atribut class memiliki 2 buah value yaitu class btn_style dan nama class warna dari button. Untuk lebih jelasnya silakan lihat contoh kode dibawah ini:

Pada contoh kode diatas maka akan menghasilkan tampilan seperti contoh gambar dibawah ini:

Gambar Hasil Contoh Kode Membuat Button Berwarna Di HTML - 2

Kamu dapat memilih kode warna yang keren-keren pada haman ini.

Oh iya apabila kamu ingin gunakan tombol tersebut sebagai tombol submit data kamu cukup menambahkan atribut type=”submit” pada tag button. Jadi misalnya seperti ini:

Membuat Tag Anchor Menjadi Tombol Berwarna

Pada tutorial cara membuat button berwarna di HTML ini kita akan manipulasi sebuah tag HTML anchor menjadi tombol. Langsung saja kita simak contoh kodenya seperti ini:

Dari contoh kode diatas jika dijalankan pada browser maka akan tampil seperti gambar berikut:

Gambar Hasil Contoh Kode Membuat Tag Anchor Menjadi Tombol Berwarna

Untuk penjelasan kode CSS pada contoh kode ini hampir mirip dengan yang contoh kode tombol sebelumnya. Namun pada bagian ini terdapat beberapa tambahan property CSS yaitu:

  • text-decoration: none; untuk menghilangkan dekorasi text, pada contoh ini untuk menghilangkan garis bawah pada link.
  • font-family: sans-serif; untuk merubah family font menjadi sans serif, karena secara bawaan font link menggunakan font family serif.
  • font-size: 13px; untuk merubah ukuran font, pada contoh ini untuk memperbesar ukuran font pada link menjadi 13px.

Selain itu kamu juga dapat memisahkan properti background-color ke selector class lain, supaya dapat lebih mudah membuat tombol berbagai warna seperti yang dilakukan pada contoh sebelumnya. Dan contoh kodenya menjadi seperti berikut ini:

Pada contoh kode diatas akan menghasilkan seperti gambar dibawah ini:

Gambar Hasil Contoh Kode Membuat Tag Anchor Menjadi Tombol Berwarna - 2

Untuk membuat tombol tersebut menjadi berfungsi menuju ke halaman tertentu silakan ubah value pada atribut href ke url yang kamu inginkan, contohnya seperti ini:

Demikian untuk tutorial cara membuat button berwarna di HTML, apabila kamu memiliki pertanyaan seputar tutorial ini silakan tanyakan melalui kolom komentar dibawah. Dan apabila kamu masih baru dalam HTML silakan kunjungi seri tutorial dasar HTML. Atau apabila kamu masih baru dalam CSS silakan kunjungi seri tutorial CSS dasar.


Kolom Komentar

Related Post