| Cara Mengubah Warna Button Di HTML admin CSS, HTML 9 Desember 201817 Januari 2019 Hijau Biru Merah Abu-abu Hitam Gunakan background-color property untuk mengubah warna background tombol: Copy paste code di bawah ini untuk melihat hasilnya: Pada bagian kali ini kita akan membuat sebuah buttons atau tombol di bootstrap 4. Diharapkan kamu membaca tutorial belajar bootstrap 4 untuk pemula seri ke-tujuh sebelumnya mengenai bagaimana cara membuat breadcrumb pada bootstrap 4. Buttons atau tombol sangat penting dari sebuah website dan sudah pasti setiap website memilikinya biasanya terdapat pada halaman login, admin, postingan dan yang memerlukan tombol lainnya. Seperti biasa lakukan persiapan dahulu kamu bisa membaca tutorial bootstrap 4 untuk pemula seri pertama mengenai : Tutorial Belajar Bootstrap 4 Untuk Pemula #1 : Pengenalan dan Cara Install Yuk langsung ke tahap pembuatan nya. Copy semua script dibawah ini lalu letakkan antara tag <body> di dalam file index kamu masing-masing. <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> Maka hasilnya akan seperti ini :  Nah bisa kita lihat ada beberapa macam warna tombol yang terdiri dari setiap class yang bisa kamu gunakan dengan mudah tanpa perlu memberi css manual pada setiap warna tersebut. Pada baris terakhir terdapat sebuah tombol “link” yang tidak memiliki class warna sehingga bootstrap 4 akan memberikan warna “transparent” otomatis karena sesuai default dari css bootstrap sendiri. Jika tadi kita membuat tombol dengan tag <button> kini kita akan membuat tombol dengan tag <a> ataupun <input> jadi silahkan copy kode dibawah ini : <a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset"> dan hasilnya akan seperti ini : Lho kenapa warna tombol nya biru semua? jelas karena kita memberikan class primary pada setiap tombol yang kita tahu class primary yang memiliki warna biru. tidak hanya warna tombol dengan satu warna atau solid. tetapi bootstrap 4 juga menyedikan jenis tombol yang hanya memiliki warna garis atau biasa disebut dengan outline. Copy kembali script dibawah ini pada index teman-teman dan save. <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button> dan hasilnya akan seperti gambar dibawah ini : Classnya tetap sama dengan sebelumnya tetapi kita hanya menambahkan class btn-outline-*warna* kemudian diikuti dengan warna yang ingin kita gunakan. Untuk ukuran tombol kamu juga tidak usah repot-repot untuk memberi css karena bootstrap 4 juga sudah menyediakan berbagai ukuran pada tombolnya masing-masing. Tombol dengan ukuran besar kamu bisa menggunakan script dibawah ini : <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-secondary btn-lg">Large button</button> dan untuk tombol dengan ukuran kecil atau small button scriptnya seperti ini : <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-secondary btn-sm">Small button</button> Disini afrizatul.com akan memasukkan 2 ukuran diatas supaya mudah dipahami jadi kira-kira hasilnya akan seperti ini : Jika masih kurang lebar lagi kamu bisa menggunakan jenis tombol ini : <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button> dan hasilnya akan seperti ini : Terakhir ada button atau tombol jenis disable yang biasa digunakan untuk membatasi hak akses dari user dan kegunaan lainnya. Tombol disable ini tidak akan bisa di klik sama sekali oleh user. Script button disabled dibawah ini : <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button> <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button> Dan hasilnya seperti ini : Kamu bisa menggerakkan mouse kamu dan mengarahkan ke tombol tersebut. Maka mouse kamu tidak akan berubah menjadi cursor tangan yang biasanya berubah jika ada sebuah link atau tombol. Akhir KataItulah bagaimana cara membuat tombol atau button pada bootstrap 4 yang memiliki berbagai jenis yang bisa mempermudah kita dalam membuat website tanpa repot-repot lagi memberikan css manual sehingga dapat menghemat waktu kita. Jangan ketinggalan seri tutorial bootstrap 4 untuk pemula lainnya ya. terima kasih. |
Cara menggunakan mengubah warna tombol bootstrap
Pos Terkait
Copyright © 2024 ketajaman Inc.
