Membuat button link dengan bootstrap

Hai teman – teman, kembali lagi di dosenit.com. Setelah kemarin kita membahas mengenai Tabel dan form bootstrap, maka kali ini kita akan membahas salah satu elemen yang penting pada suatu website terutama website yang membutuhkan kontak langsung dengan user yaitu BUTTON.

sebelum membahas lebih dalam mengenai Button pada bootstrap, alangkah baiknya kita membahas mengenai dasar button dalam pemrograman html. Pada html, button dibuat dengan menambahkan tag

tulisan

Didalam tag kita dapat menambahkan banyak tag lain didalamnya seperti

Didalam button juga dapat kita masukkan java script seperti tag onClick

	
	 Klik
 	

Setelah teman-teman mengetahui mengenai dasar tag html dari button, sekarang kita akan memasukkan style bootstrap dan jangan lupa menginputkan link bootstrap di dalam tag head. Disini saya menggunakan bootstrap 4.

Section Artikel

• 1 Button bootstrap
• 2 Tag memanggil button yang lain
• 3 Outline button
• 4 Ukuran Button
• 5 Aktif / Nonaktif Button
• 6 Perataan Button / Align button

Button bootstrap

Button pada bootstrap terdapat beberapa macam diantaranya

Tipe Button	Cara memanggil / class yang diperlukan
Primary Button	btn btn-primary
Secondary Button	btn btn-secondary
Success Button	btn btn-success
Danger Button	btn btn-danger
Warning Button	btn btn-warning
Info Button	btn btn-info
Light Button	btn btn-light
Dark Button	btn btn-dark
Link Button	btn btn-link
Default button	btn btn-default

daftar style button bootstrap

agar lebih jelas lihat script dibawah:

  
    
  
  
    Primary
    Secondary
    Success
    Danger
    Warning
    Info
    Light
    Dark
    Link
    Default
  

Tag memanggil button yang lain

Selain dengan menggunakan tag dalam bootstrap kita dapat membuat button dengan menggunakan tag dan . contohnya:

  
    
  
  
	Link
	

Button

Outline button

Dalam contoh – contoh button bootstrap diatas warna latar atau gambar button memenuhi tampilan button secara keseluruhan. Nah bagaimana kalau hanya menampilkan button dengan outlinenya saja tanpa warna latar ataupun gambar ?, untuk itu kita hanya perlu menambahlan class btn-outline- . lihat contoh dibawah

  
    
  
  
    Primary
	Secondary
	Success
	Danger
	Warning
	Info
	Light
	Dark
  

Ukuran Button

Dalam bootstrap kita bisa mengatur ukuran button dengan memasukkan tag btn-lg , btn-sm, atau btn-block didalam class button sebelumnya contoh :

  
    
  
  
	Large button
    Small button
    Block level button
  

Aktif / Nonaktif Button

Selain mengatur ukuran dalam bootstrap juga tersedia pilihan tag untuk mengatur kapan kita akan me-aktifkan button atau bahkan men-nonaktifkan atau disable button yang kita buat. contohnya

  
    
  
  
	button aktif
    button nonaktif
    Link
  

Khusus untuk tag dalam menonaktifkan button yang dibuat ada sedikit perbedaan yaitu

• menambahkan class .diabled dalam tag , karena tag tidak mendukung penggunaan attribut disable seperti tag button
• pada tag jika tombol dinonaktifkan harus menyertakan attribut aria-disable=”true” untuk menunjukan status elemennya
• pada tag saat tombol dinonaktifkan tidak akan terlihat kursor menjadi tanda nonaktif (silang), ini berlaku pada beberapa browser yang mendukung “pointer-event”

Perataan Button / Align button

Button pada bootstrap juga dapat kita atur perataannya atau align nya yaitu dengan menambahkan class .float-right untuk button rata kanan, .float-left untuk button rata kiri. Khusus button rata tengah tidak bisa memakai .float-center karena bootstrap tidak mendukung hal tersebut maka sebagai gantinya biasanya saya memakai

untuk perataan button pada bootstrap 3 berbeda dari botstrap 4 yaitu menggunakan .pull-right atau .pull-left. sedangkan rata tengah sama dengan bootstrap 4.

  
    
  
  
    kanan


	kiri


     

      button center dengan div
    
  

Itulah tutorial sedikit tentang penggunaan button pada Bootstrap khususnya pada bootstrap 4, selain hal – hal diatas teman -teman juga dapat men-modifikasi sendiri style dari button teman-teman.

Caranya yaitu dengan mengatur tag button dengan CSS. Sehingga tampilan nya dapat kita gabungkan antara desain button kita dengan desain dari bootstrap agar terlihat lebih bagus.

YogaBayu

Seorang yang menyukai dunia elektronika dan website.