Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Bootstrap 3

Bootstrap 3 Button - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Button

Button ialah bab suplemen untuk situs web dan aplikasi. Button dipakai untuk banyak sekali tujuan seperti, mengirim sebuah data atau mengatur ulang bentuk HTML, melaksanakan tindakan interaktif yang dilakukan oleh user menyerupai menampilkan atau menyembunyikan sesuatu bab di halaman web ketika tombol tersebut di klik atau ditekan.
Bootstrap 3 sudah menyediakan cara cepat, mudah dan gampang dipakai guna keperluan pembuatan sebuah tombol atau button

Tampilan Bootstrap 3 Button

Tampilan Button sanggup diaplikasikan ke elemen HTML lainnya. Tapi, untuk penerapan secara normal dan terbaik ialah element <a>, <input> (untuk type button, submit dan reset), dan <button>.
Untuk mengatur tampilan button memakai Bootstrap 3 sanggup memakai nama class sebagai berikut :
  1. .btn
    • Nama class .btn ialah nama class dasar yang harus ditulis sebelum nama class lainnya.
    • Contoh Penulisan : <button type="button" class="btn">Button</button>
  2. .btn-default
    • Contoh Penulisan : <button type="button" class="btn btn-default">Default</button>
  3. .btn-primary
    • Contoh Penulisan : <button type="button" class="btn btn-primary">Primary</button>
  4. .btn-info
    • Contoh Penulisan : <button type="button" class="btn btn-info">Info</button>
  5. .btn-success
    • Contoh Penulisan : <button type="button" class="btn btn-success">Success</button>
  6. .btn-warning
    • Contoh Penulisan : <button type="button" class="btn btn-warning">Warning</button>
  7. .btn-danger
    • Contoh Penulisan : <button type="button" class="btn btn-danger">Danger</button>
  8. .btn-link
    • Contoh Penulisan : <button type="button" class="btn btn-link">link</button>

Contoh :

<button type="button" class="btn">Dasar</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-success">Success</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-link">link</button>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Button</code></h2>  <button type="button" class="btn">Dasar</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-success">Success</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-link">link</button>  </div> </body> </html>

Contoh memakai element <a> dan <input>

<a class="btn btn-primary" href="#">Primary</a> <a class="btn btn-success" href="#">Success</a>   <hr/> <input type="button" class="btn btn-default" value="Button"/> <input type="submit" class="btn btn-primary" value="Submit"/> <input type="reset" class="btn btn-danger" value="Reset"/>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Button</code> <small>pada element a dan input</small></h2>   <a class="btn btn-primary" href="#">Primary</a> <a class="btn btn-success" href="#">Success</a>   <hr/> <input type="button" class="btn btn-default" value="Button"/> <input type="submit" class="btn btn-primary" value="Submit"/> <input type="reset" class="btn btn-danger" value="Reset"/>   </div> </body> </html>

Ukuran Button

Untuk mengatur ukuran button sanggup menambahkan class .btn-xs, .btn-sm, .btn-md, dan .btn-lg
Keterangan :
  • .btn-xs : sangat kecil
  • .btn-sm : kecil
  • .btn-md : sedang
  • .btn-lg : besar

Contoh :

<button type="button" class="btn btn-info btn-xs">Button .xs</button> <button type="button" class="btn btn-info btn-sm">Button .sm</button> <button type="button" class="btn btn-info btn-md">Button .md</button> <button type="button" class="btn btn-info btn-lg">Button .lg</button>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Button</code></h2>  <button type="button" class="btn btn-info btn-xs">Button .xs</button> <button type="button" class="btn btn-info btn-sm">Button .sm</button> <button type="button" class="btn btn-info btn-md">Button .md</button> <button type="button" class="btn btn-info btn-lg">Button .lg</button>  </div> </body> </html>

Bootstrap 3 Button Block

Digunakan untuk menciptakan tampilan button menjadi membentang dari kanan kekiri meyesuaikan lebar dari element induknya.
Untuk menerapkan button block tambahkan class .btn-block

Contoh :

<button type="button" class="btn btn-danger btn-block">Button Block</button>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Button</code> Block</h2>  <button type="button" class="btn btn-block">Button Block</button> <button type="button" class="btn btn-default btn-block">Button Block</button> <button type="button" class="btn btn-primary btn-block">Button Block</button> <button type="button" class="btn btn-info btn-block">Button Block</button> <button type="button" class="btn btn-success btn-block">Button Block</button> <button type="button" class="btn btn-warning btn-block">Button Block</button> <button type="button" class="btn btn-danger btn-block">Button Block</button> <button type="button" class="btn btn-link btn-block">Button Block</button>   <div style="width:150px;">  <button type="button" class="btn btn-block">Button Block</button>  <button type="button" class="btn btn-default btn-block">Button Block</button>  <button type="button" class="btn btn-primary btn-block">Button Block</button>  <button type="button" class="btn btn-info btn-block">Button Block</button>  <button type="button" class="btn btn-success btn-block">Button Block</button>  <button type="button" class="btn btn-warning btn-block">Button Block</button>  <button type="button" class="btn btn-danger btn-block">Button Block</button>  <button type="button" class="btn btn-link btn-block">Button Block</button> </div>   </div> </body> </html>

Bootstrap 3 Button Active dan Disabled

Button active artinya memiliki tampilan menyerupai ditekan, sedangkan button disabled artinya memiliki tampilan menyerupai ditak aktif
Untuk menerapkannya gunakan class .active untuk aktif dan .disabled untuk nonaktif
Catatan : class .disabled pada button hanya mensugesti tampilan saja, tidak pada fungsi interaksi oleh user atau pengunjung. Misal kalau .disabled memiliki fungsi javascript maka, dikala user menekan tombol tersebut javascript tersebut akan aktif.
Tips : untuk menonaktifkan fungsi pada button sertakan attribute disabled pada button

Contoh :

<button class="btn btn-danger">Button</button> <button class="btn btn-danger active">Button Active</button> <button class="btn btn-danger disabled">Button Disabled</button>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Button</code> Block</h2>  <button class="btn btn-danger">Button</button> <button class="btn btn-danger active">Button Active</button> <button class="btn btn-danger disabled">Button Disabled</button>  <hr/> <h3>Tes interaksi user</h3> <p> Untuk melihat perbedaan fungsi attribute disabled VS class <code>.disabled</code> Silahkan tekan 3 button di bawah ini. </p>  <button onclick="alert('Test disabled')"    class="btn btn-danger disabled">  Button class disabled </button>  <button onclick="alert('Test disabled')"    class="btn btn-danger"          disabled="disabled">  Button dengan attribute disabled </button>  <p><br/></p>  <button onclick="alert('Test disabled')"    class="btn btn-danger disabled"          disabled="disabled">  Button dengan attribute disabled dan class disabled </button>   </div> </body> </html>