Tombol biasa digunakan untuk interaksi dengan sistem sehingga dapat bekerja dengan semestinya. Seperti contohnya tombol submit, confirm, dan lain-lain.
Berikut sampel desain tombol yang ditawarkan BebyKit:
<button class="button-small">halo</button>
<button class="button-outline button-small">halo</button>
<button class="button-outline button-passive button-small">halo</button>
Untuk menggunakan tombol biasa, kamu dapat dengan mudah memanggil class dengan value uang berisi dengan "button".
Berikut contoh yang dapat kamu implementasikan:
<a class="button">halo</a>
<button class="button">bebykit</button>
<input type="button" class="button" value="framework css">
Tombol ini dapat diterapkan di 3 unsur berbeda-seperti yang terlihat di dalam source code.
Kamu dapat menerapkan tombol ini pada unsur a, button, ataupun input type="button".
Tombol outline tidak memiliki bayangan dan memiliki background transparan. Apabila tombol ditekan, maka tombol akan bereaksi dengan mengubah warnanya sesuai dengan warna border - nya.
<a class="button-outline">halo</a>
<button class="button-outline">bebykit</button>
<input type="button" class="button-outline" value="framework css">Tombol Outline Passive mirip dengan Tombol Outline, perbedaannya hanya terletak di warna dan reaksi unsur ketika user berinteraksi dengan tombol. Berikut contoh tombol outline passive:
<a class="button-outline button-passive">halo</a>
<button class="button-outline button-passive">bebykit</button>
<input type="button" class="button-outline button-passive" value="framework css">
Kamu dapat mengubah ukuran tombol dengan menggunakan class BebyKit.
<button class="button-mini">mini</button>
<button class="button-small">small</button>
<button class="button-medium">medium</button>
<button class="button-large button-outline">large</button>
<button class="button-maxi button-outline button-passive">maxi</button>
Pewarnaan tombol hanya berlaku untuk Tombol Biasa & Tombol Outline. Sedangkan Tombol Outline Passive tidak dapat diberikan pewarnaan!
Pewarnaan unsur-seperti biasa dapat diterapkan pada tombol biasa pula, sedangkan khusus untuk tombol outline, cukup ubah warna teks - nya saja untuk dapat memberikan pewarnaan pada tombol tersebut.
<button class="button-small background-red-2">small</button>
<button class="button-small background-dark">small</button>
<button class="button-small background-grey-1">small</button>
<button class="button-small button-outline text-red-4">small</button>
<button class="button-small button-outline text-green-5">small</button>
Catatan:
Pewarnaan pada Tombol Outline hanya berfungsi dengan baik jika warna yang digunakan adalah warna yang sudah tersedia dari class BebyKit.
Apabila Kamu ingin menggunakan warna selain warna yang tersedia tersebut, maka diharap developer dapat merekayasanya kembali di source code mereka sendiri dengan menuliskannya sendiri-sesuai dengan keinginan Kamu.
Referensi Warna:
Lihat Selengkapnya