botton bootstrap


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.

Sumber articles
https://siijombi.blogspot.co.id/2017/03/cara-membuat-tombol-botton-dengan-bootstrap.html?m=1

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×