Kali ini saya akan membuat tutorial tentang penggunaan Bootstrap Valid Amp. bootstrap juga mendesign tombol, dan Cara Membuat Tombol Dengan Bootstrap Valid Amp ini sangat mudah, sobat hanya tinggal menambahkan class "btn" untuk mendefinisikan element tersebut menjadi tombol dan anda dapat mengatur ukuran dan warna tombol yang anda inginkan. Karena sebuah artikel blog, terkadang membutuhkan tautan atau link untuk memperjelas maksud konten atau untuk memberikan contoh kepada pengunjung.
Untuk style tombol atau button pada bootstrap ada beberapa diantaranya seperti berikut :
Link
Sebelum menerapkan kedalam contoh, ada baiknya terlebih dahulu sobat ketahui ukuran button yang disediakan bootstrap. Berdasarkan ukuran, class button bootstrap dan Berdasarkan warna,bootstrapjuga menyediakan beberapa jenis class.
| Syntax Class | Fungsi |
|---|---|
| .btn | Class bootstrap untuk yang bisa digunakan untuk membuat tombol |
| .btn-xs | Class bootstrap untuk membuat tombol dengan ukuran yang sangat kecil. |
| .btn-sm | Class bootstrap untuk membuat tombol dengan ukuran kecil. |
| .btn-md | Class bootstrap untuk membuat tombol dengan ukuran sedang. |
| .btn-lg | Class bootstrap untuk membuat tombol dengan ukuran besar. |
| .btn-default | Class bootstrap untuk membuat tombol dengan warna standar yaitu putih. |
| .btn-warning | Class bootstrap untuk membuat tombol dengan berwarna kuning. |
| .btn-primary | Class bootstrap untuk membuat tombol dengan berwarna biru. |
| .btn-info | Class bootstrap untuk membuat tombol dengan berwarna biru langit. |
| .btn-success | Class bootstrap untuk membuat tombol dengan berwarna hijau. |
Pertama sekali sobat harus pasang CSS di bwah ini di tamplate sobat :
a.btn-default{color:#333} a.btn-primary,a.btn-success,a.btn-info,a.btn-warning,a.btn-danger{color:#fff} .btn,.btn:active{background-image:none} .btn,.btn-link{font-weight:400} .btn{display:inline-block;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px} .btn:active:focus,.btn:focus{outline:0;} .btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0;} .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)} .btn-default{color:#333;background-color:#fff;border-color:#ccc} .btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c} .btn-default:active,.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad} .btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4} .btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40} .btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74} .btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c} .btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625} .btn-success:active,.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439} .btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da} .btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85} .btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc} .btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236} .btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d} .btn-warning:active,.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512} .btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a} .btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19} .btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925} .btn-link{color:#337ab7;border-radius:0} .btn-link,.btn-link:active{background-color:transparent;-webkit-box-shadow:none;box-shadow:none} .btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent} .btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent} .btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px} .btn-sm,.btn-xs{font-size:12px;line-height:1.5;border-radius:3px} .btn-sm{padding:5px 10px} .btn-xs{padding:1px 5px} .btn-block{display:block;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .btn-block+.btn-block{margin-top:5px}Cara penulisan pada HTML postingan seperti ini :
<button type="button" class="btn btn-primary btn-lg">Warna Biru</button>Dan hasilnya seperti ini :
Untuk demo Kode Ini :
Tombol Tombol Tombol Tombol
Tombol Tombol Tombol Tombol
Tombol Tombol Tombol Tombol
Tombol Tombol Tombol Tombol
Tombol Tombol Tombol Tombol
<a href="#" class="btn btn-success btn-lg">Tombol</a>
<a href="#" class="btn btn-success btn-md">Tombol</a>
<a href="#" class="btn btn-success btn-sm">Tombol</a>
<a href="#" class="btn btn-success btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-primary btn-lg">Tombol</a>
<a href="#" class="btn btn-primary btn-md">Tombol</a>
<a href="#" class="btn btn-primary btn-sm">Tombol</a>
<a href="#" class="btn btn-primary btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-info btn-lg">Tombol</a>
<a href="#" class="btn btn-info btn-md">Tombol</a>
<a href="#" class="btn btn-info btn-sm">Tombol</a>
<a href="#" class="btn btn-info btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-danger btn-lg">Tombol</a>
<a href="#" class="btn btn-danger btn-md">Tombol</a>
<a href="#" class="btn btn-danger btn-sm">Tombol</a>
<a href="#" class="btn btn-danger btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-default btn-lg">Tombol</a>
<a href="#" class="btn btn-default btn-md">Tombol</a>
<a href="#" class="btn btn-default btn-sm">Tombol</a>
<a href="#" class="btn btn-default btn-xs">Tombol</a>Untuk lebih lengkap sobat bisa lihat di Bootstrap Button. Semoga bermanfaat.
Tambahkan Komentar Tutup Komentar