Cara Membuat Tombol Bootstrap di Postingan Valid AMP

Seperti yang aku pakai dalam postingan aku ini

DEMO

style tombol/button pada bootstrap terdapat beberapa berukuran dan rona:

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 gosip lg isu md fakta sm gosip 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 misalnya dalam atas silahkan anda copy kode css pada bawah ini. Dan letakan pada atas style amp-custom='amp-custom pada tampilan mobile jua desktop.

			A.Btn-defaultcolor:#333 a.Btn-primary,a.Btn-success,a.Btn-informasi,a.Btn-warning,a.Btn-dangercolor:#fff .Btn,.Btn:activebackground-image:none .Btn,.Btn-linkfont-weight:400 .Btndisplay: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:focusoutline:0; .Btn:focus,.Btn:hovercolor:#333;text-decoration:none;outline:0; .Btn:activeoutline: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-defaultcolor:#333;background-color:#fff;border-color:#ccc .Btn-default:focuscolor:#333;background-color:#e6e6e6;border-color:#8c8c8c .Btn-default:active,.Btn-default:hovercolor:#333;background-color:#e6e6e6;border-color:#adadad .Btn-primarycolor:#fff;background-color:#337ab7;border-color:#2e6da4 .Btn-primary:focuscolor:#fff;background-color:#286090;border-color:#122b40 .Btn-primary:active,.Btn-primary:hovercolor:#fff;background-color:#286090;border-color:#204d74 .Btn-successcolor:#fff;background-color:#5cb85c;border-color:#4cae4c .Btn-success:focuscolor:#fff;background-color:#449d44;border-color:#255625 .Btn-success:active,.Btn-success:hovercolor:#fff;background-color:#449d44;border-color:#398439 .Btn-gosipcolor:#fff;background-color:#5bc0de;border-color:#46b8da .Btn-berita:focuscolor:#fff;background-color:#31b0d5;border-color:#1b6d85 .Btn-keterangan:active,.Btn-informasi:hovercolor:#fff;background-color:#31b0d5;border-color:#269abc .Btn-warningcolor:#fff;background-color:#f0ad4e;border-color:#eea236 .Btn-warning:focuscolor:#fff;background-color:#ec971f;border-color:#985f0d .Btn-warning:active,.Btn-warning:hovercolor:#fff;background-color:#ec971f;border-color:#d58512 .Btn-dangercolor:#fff;background-color:#d9534f;border-color:#d43f3a .Btn-danger:focuscolor:#fff;background-color:#c9302c;border-color:#761c19 .Btn-danger:active,.Btn-danger:hovercolor:#fff;background-color:#c9302c;border-color:#ac2925 .Btn-linkcolor:#337ab7;border-radius:0 .Btn-link,.Btn-link:activebackground-color:transparent;-webkit-box-shadow:none;box-shadow:none .Btn-link,.Btn-link:active,.Btn-link:focus,.Btn-link:hoverborder-color:transparent .Btn-link:focus,.Btn-link:hovercolor:#23527c;text-decoration:underline;background-color:transparent .Btn-lgpadding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px .Btn-sm,.Btn-xsfont-size:12px;line-height:1.Lima;border-radius:3px .Btn-smpadding:5px 10px .Btn-xspadding:1px 5px .Btn-blockdisplay:block;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box .Btn-block .Btn-blockmargin-top:5px

Untuk kode pemanggil pada Halaman HTML nya silahkan anda gunakan kode pada 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>

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

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

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

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