belajar bootstrap4, tutorial Bootstrap 4

Membuat Outline Button di Bootstrap 4 | Tutorial Bootstrap 4

Sebelumnya kita sudah belajar membuat button di artikel sebelumnya yaitu cara membuat button di Bootstrap 4 dan kali ini kita akan membuat button outline, yaitu button yang berlatar belakang transparant, hanya menggunakan variasi warna border saja (outline)

Perbedaan dengan button sebelumnya yaitu menggunakan nama class dengan menyisipkan kata outline diantara type button.
Misal untuk btn-primary menjadi btn-outline-primary. Contoh coding sebagai berikut:

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

Dari coding tersebut akan menghasilkan:








Semoga mermanfaat

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...