Cara Membuat Tombol Menggunakan Modifier Clasess Bulma

Tombol pasti akan selalu ada di dalam suatu website karena tombol sering digunakan untuk perintah-perintah seperti submit form, menghubungkan page satu dengan yang lainnya dan masih banyak lagi. Dengan bulma framework kita bisa dengan mudah untuk memodifikasi tombol yang kita buat seprti warna tombol dan ukuran tombol. Pada tips dan trick kali ini saya akan membagikan Cara Membuat Tombol Menggunakan Modifier Clasess Bulma.

Di bulma framework ada salah satu class yaitu modifier classess yang memudahkan kita untuk mengubah warna dan ukuran suatu element sepert elemen button atau tombol. Langsung saja saya akan memberikan langkah-langkah Cara Membuat Tombol Menggunakan Modifier Clasess Bulma:

– Pertama, anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

– Kedua, anda ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Modifier Clasess</title>
	<!--link ke css bulma-->
	<link rel="stylesheet" href="bulma-0.4.0/css/bulma.css">
	<!--link ke font-awesome-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<br>

<div class="column">
<h1 class="title is-1 has-text-centered">Membuat Tombol Menggunakan Modifier Clasess Bulma</h1>
  <div class="columns">
  
    <div class="column has-text-centered">
      <h1 class="title is-4 has-text-centered">Modifier Clasess Bulma Untuk Warna Tombol</h1>
        <a class="button is-primary">
          Button
        </a>
        <a class="button is-info">
          Button
        </a>
        <a class="button is-success">
          Button
        </a>
        <a class="button is-warning">
          Button
        </a>
        <a class="button is-danger">
          Button
        </a>
    </div>
    <br>
    <div class="column has-text-centered">
      <h1 class="title is-4 has-text-centered">Modifier Clasess Bulma Untuk Ukuran Tombol</h1>
        <a class="button is-info is-small">
          Button
        </a>
        <a class="button is-success">
          Button
        </a>
        <a class="button is-warning is-medium">
          Button
        </a>
        <a class="button is-danger is-large">
          Button
        </a>
    </div>

  </div>
</div>

<br>	
</body>
</html>

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

Saya sengaja membuat dua kolom, kolom pertama adalah modifier untuk warna dimana kita akan memasukan class yang berbeda untuk merubah warnanya adapun classes untuk merubah warna pada bulma adalah sebagai berikut:

• is-primary (Hijau toska)
• is-info (Biru)
• is-success (Hijau)
• is-warning (Kuning)
• is-danger (Merah)

dan kolom kedua untuk ukuran tombolnya, dimana terdapat 4 ukuran kolom, Berikut clasess yang di gunakan untuk merubah ukuran kolom di bulma:

• is-small
• is-medium
• is-large

dan ukuran satu lagi adalah ukuran default dimana kita tidak usah mengisi atau menambahkan clasess modifier.

Dengan bulma kita dapat dengan mudah memodifikasi elemen-elemen yang ada. Bagaimana teman-teman cukup mudahkan membuat yombol menggunakan modifier clasess bulma.

Sekian tips dan trick tentang Cara Membuat Tombol Menggunakan Modifier Clasess Bulma. Semoga bermanfaat.