Cara membuat button bootsrap valid AMP tujuan membuat tombol biasanya para blogger memanfaatkan untuk mempercantik suatu halaman posting/membuat tombol demo dari artikel yang berisi tentang tutorial sehingga dapat mempermudahkan pengunjung melihat contoh dari hasil tutorial itu sendiri agar lebih jelas,
Seperti yang saya pakai di postingan saya ini
DEMO
style tombol/button pada bootstrap ada beberapa ukuran dan warna:
succes btn lg btn block succes lg succes md succes sm succes xc
primary btn lg btn block primary lg primary md primary sm primary xs
info btn lg btn block info lg info md info sm info xs
defalt btn lg btn block danger lg danger md danger sm danger xs
defalt btn lg btn block default lg default md defaul sm default xs
Untuk memasang tombol seperti di atas silahkan anda copy kode css di bawah ini. Dan letakan di atas style amp-custom=’amp-custom di tampilan mobile maupun desktop.
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}
Untuk kode pemanggil di Halaman HTML nya silahkan anda pakai kode di bawah ini.
<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>
Keterangan
- .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.
Semoga bermanfaat selamat mencoba boosku…