Cara Membuat Tombol Bootstrap di Postingan Valid AMP

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 xs

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...