Dalam HTML tab Button itu adalah untuk membuat sebuah tombol, dimana tombol ini berfungsi sebagai pembuat perintah ketika kita tekan tombol tersebut, kita bisa membuat perintah input, delete, create, dan banyak sekali. Di berbagai framework CSS itu sendiri biasanya di sediakan class class untuk membuat buttons ini. Bagaimana kalo di Pure CSS? Nah klai ini saya akan menjelaskan Jenis- jenis Buttons di Pure CSS.
- Default Buttons
Default buttons adalah tombol default bawaan Pure CSS. Untuk membuatnya sendiri kita hanya memasukan class “pre-button†ke tag <a> atau tag <button>.
Lihat contoh kode HTML di bawah.
|
1 2 3 |
<a class="pure-button" href="#">A Pure Button</a> <button class="pure-button">A Pure Button</button> |
Hasilnya
- Disable Buttons
Disable Buttons adalah class untuk menonaktivkan tombol. Cara membuatnya sendiri tinggal tambah kan class “pure-button-disable†pada tag button atau ketikan atribut “disable†langsung ke tab button . lihat contoh di bawah.
|
1 |
<button class="pure-button pure-button-disabled" > A Disabled Button </button><button class="pure-button" disabled > A Disabled Button </button> |
- Active buttons
Active Buttons adalah class dari Pure CSS untuk memberikan style seperti tombol di tekan pada tag button. Untuk membuatnya kita tambahkan class “pure-button-active†setelah class :pure-buttonâ€. Lihat contoh kode di bawah ini.
|
1 |
<a class= "pure-button pure-button-active" href ="#" > An Active Button </a><button class ="pure-button pure-button-active" > An Active Button </button> |
- Primary Buttons
Memberika style warna menjadi warna biru pada tombol. Cara menggunakannya tinggal tambahkan class “pure-button-primary†setelah class “pure-button†lihat contoh kode di bawah ini.
|
1 |
<a class="pure-button pure-button-primary" href="#">A Primary Button</a><button class="pure-button pure-button-primary">A Primary Button</button> 5. Customizing ButtonsUntuk memberi style berbeda antar tiap tombol, kalian masukan dulu kode css ini setelah. Lihat contoh: <div> <style scoped> .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { background: rgb(28, 184, 65); /* this is a green */ } .button-error { background: rgb(202, 60, 60); /* this is a maroon */ } .button-warning { background: rgb(223, 117, 20); /* this is an orange */ } .button-secondary { background: rgb(66, 184, 221); /* this is a light blue */ } </style> <button class="button-success pure-button">Success Button</button> <button class="button-error pure-button">Error Button</button> <button class="button-warning pure-button">Warning Button</button> <button class="button-secondary pure-button">Secondary Button</button></div> |
Maka hasilnya seperti ini
Nah seperti itu lah Jenis – jenis Buttons di Pure CSS, semoga kalian tertarik mempelajarinya. Keep Coding 😀