Cara Membuat Tombol Menggunakan Modifier Clasess Bulma
Tombol pasti akan selalu ada di pada suatu situs karena tombol sering digunakan bagi perintah-perintah seperti submit form, menghubungkan page satu dengan yang lainnya dan masih banyak lagi. Dengan bulma framework kita dapat dengan gampang bagi memodifikasi tombol yang kita bikin seprti warna tombol dan ukuran tombol. Di tips dan trick kali ini saya akan membagikan Cara Merancang Tombol Menggunakan Modifier Clasess Bulma.
Di bulma framework ada diantara class yaitu modifier classess yang mempermudah kita bagi mengubah warna dan ukuran suatu element sepert unsur button atau tombol. Seketika saja saya akan memberikan strategi Cara Merancang Tombol Menggunakan Modifier Clasess Bulma:
– Pertama-tama, kamu unduh file bulmanya di situs bulma itu sendiri dan tempatkan di folder project yang teman-teman bikin.
– Kedua, kamu 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>Merancang 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 Bagi 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 Bagi 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 karenanya tampilannya akan menjadi seperti berikut:
Saya sengaja merancang dua kolom, kolom pertama-tama yaitu modifier bagi warna dimana kita akan memasukan class yang berbeda bagi merubah warnanya adapun classes bagi merubah warna di bulma yaitu selaku berikut:
- is-primary (Hijau toska)
- is-info (Biru)
- is-success (Hijau)
- is-warning (Kuning)
- is-danger (Merah)
dan kolom kedua bagi ukuran tombolnya, dimana terdapat 4 ukuran kolom, Berikut clasess yang di gunakan bagi merubah ukuran kolom di bulma:
- is-small
- is-medium
- is-large
dan ukuran satu lagi yaitu ukuran default dimana kita tak usah mengisi atau menambahkan clasess modifier.
Dengan bulma kita dapat dengan gampang memodifikasi elemen-elemen yang terdapat. Bagaimana teman-teman lumayan mudahkan merancang yombol menggunakan modifier clasess bulma.
Sekianlah tips dan trick mengenai Cara Merancang Tombol Menggunakan Modifier Clasess Bulma. Semoga bermanfaat.
Sumber https://kursuswebsite.org
