Button Bootstrap For AMP Blogger

kali ini pengen berbagi cara membuat Button Bootstrap For AMP Blogger dan kamu bisa memodifikasi nya lagi dengan ke inginan kamu cara penggunaan nya akan saya berikan di bawah ini , biasa nya button ini di gunakan untuk pemilik blogger download tetapi kita pengguna AMP blogger juga pengen membuat blog yang sudah valid dengan amp agar lebih menarik lagi tempilan nya dan kali ini kamu bisa memasang button dari bootstrap di blog milik kamu

Silakan lihat contoh milik saya di bawah ini

DEMO Button

Letakan Css di bawah ini di bagian bawah <style amp-custom='amp-custom'>

Code Css

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}

Selesai pemasangan Css code di atas lalu untuk menampilkan (button) tombol nya bisa lihat code script di bawah ini.
Demo
<a class="btn btn-primary bn-lg" href="https://www.ffery.com">Demo</a>

Script di atas yang saya beri warna biru btn-primary itu untuk menentukan warna tombol (Button) untuk kode warna button di bawah ini:
  • btn: standar
  • btn-default : Abu-abu
  • btn-primary : Biru
  • btn-success : Hijau
  • btn-primary : Standar
  • btn-warning : orange
  • btn-info : Biru laut
  • btn-danger : Merah
  • btn-link : Standar
Untuk lebih lengkap kamu bisa berkunjung untuk melihat kode-kode button nya di link berikut ini Bootstrap Button
kode yang saya berikan warna kuning yang bisa di rubah jadi kamu bisa memodifikasi kode yang saya berikan warna kuning kode nya bisa di lihat seperti gambar di bawah ini agar lebih jelas Sekian tutorial dari saya semoga bermanfaat


Use parse tool to easy get the text style on disqus comments:

Show ParserHide Parser