belajar bootstrap4, tutorial Bootstrap 4

Membuat tombol atau button di Bootstrap 4 | Tutorial Bootstrap 4

Tombol atau button di Bootstrap4 adalah element web yang tidak bisa kita abaikan. Hampir di setiap halaman kita membutuhkan button. walaupun link sudah bisa mewakili button, namu ada beberapa element yang wajib menggunakan button dan tidak bisa digantikan dengan link. contohnya bagian web yang mengarahkan ke Call to Us.

Untuk membuat button, kita bisa menggunakan class .btn yang diikuti oleh nama class turunannya yang berfungsi sebagai penentu jenis button diantaranya .btn-primary, .btn-secondary, .btn-secondary, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-link

contoh coding:

<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Hasilnya:










Selain menggunakan tag button, button juga bisa dibuat dengan menggunakan tag a atau tag input

contoh coding

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button"> 

Hasilnya:

Link Button


Selamat mencoba

One thought on “Membuat tombol atau button di Bootstrap 4 | Tutorial Bootstrap 4”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Another Article

loading...