--> Skip to main content

Cara Membuat Tombol atau Button pada Bootstrap

Assalamu'alaikum Wr.Wb
Salam Dan Bahagia

Pendahuluan
  Pada kali ini saya akan membagikan sedikit tutorila nih bagaimana sih cara membuat tombol atau Button pada Bootstrap, Nah langsung saja dibaca dan dipahami serta di praktikkan ya.

Latar Belakang
      Masih ada beberapa tombol yang tampilannya kurang modern, dengan menggunakan Bootstrap ini pembuatan Tombol akan jauh lebih mudah dan memiliki kesan yang Modern.

Maksud dan tujuan
      Agar Mengerti tag-tag Button dalam Bootstrap sehingga jika ingin menerapkan atau mengimplementasikan jadi lebih mudah.

Jangka Waktu yang dibutuhkan
      40 Menit

Alat dan Bahan
      Laptop.
      Teks Editor.
      Browser.

Pembahasan atau langkah Kerja
     
Bootstrap merupakan framework css yang populer dikalangan ini, tak hanya itu bootstrap sendiri juga menyediakan salah satu UI Bawaan Salah satunya adalah Button, nah untuk membuat button ini kita hanya memunculkan salah satu class Button yang ada di Bootstrap yaitu btn- maka secara otomatis akan dibuatkan sendiri, tak hanya itu diBootstrap ini Button memiliki tipe class yang berbeda-beda, tipe tersebut antara lain :


  • .btn
  • .btn-xs
  • .btn-md
  • .btn-lg
  • .btn-danger
  • .btn-primary
  • .btn-warning
  • .btn-info
  • .btn-success
  • .btn-default
Nah Lalu bagaimana cara membuatnya?
Berikut cara membuatnya,Untuk membuat tombol kalian bisa menggunakan tag <a> menggunakan hyperlink atau menggunakan tag <button>.
Nah berikut Merupakan cara membuat button dengan class-class yang sudah disebutkan tadi
Source Code :



Maka hasilnya akan seperti ini :


Nah gimana? mudah bukan.

      Jika kita ingin membuat tombol atau button menggunakan bootstrap akan menjadikan lebih cepat dan meiliki kesan yang modern.

Sekian yang dapat saya sampikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih.
Wassalamu'alaikum Wr.Wb
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar