4.05.2014

Button Bootstrap metro style

button bootstrapDiantara sekian banyak jenis framework ada satu yang menjadi favorit saya yaitu Bootstrap Metro style. perbedaan dengan framework lainnya adalah jika di metro style kesan tegas dan modern sangat menonjol serta flat design kombinasi warnanya juga lebih terang.
Button merupakan component penting dalam setiap pembuatan blog atau website, kelebihan menggunakan button bootstrap adalah komposisi warnanya ada banyak sehingga penempatan button lebih bervariatif. pada umunya component blog yang membutuhkan button adalah class Read more atau next page dan prev page, bisa juga untuk button home dll.
Download kode css nya disini
Demo  button bootstrap metro style tersebut bisa dilihat dibawah ini:


Danger Button
<button class="btn btn-danger btn-lg" type="button">Large button</button>
<button class="btn btn-danger" type="button">Default button</button>
<button class="btn btn-danger btn-sm" type="button">Small button</button>
<button class="btn btn-danger btn-xs" type="button">Mini button</button>


Warning Button
<button class="btn btn-warning btn-lg" type="button">Large button</button>
<button class="btn btn-warning" type="button">Default button</button>
<button class="btn btn-warning btn-sm" type="button">Small button</button>
<button class="btn btn-warning btn-xs" type="button">Mini button</button>


Success Button
<button class="btn btn-success btn-lg" type="button">Large button</button>
<button class="btn btn-success" type="button">Default button</button>
<button class="btn btn-success btn-sm" type="button">Small button</button>
<button class="btn btn-success btn-xs" type="button">Mini button</button>


Default Button
<button class="btn btn-default btn-lg" type="button">Large button</button>
<button class="btn btn-default" type="button">Default button</button>
<button class="btn btn-default btn-sm" type="button">Small button</button>
<button class="btn btn-default btn-xs" type="button">Mini button</button>


Info Button
<button class="btn btn-info btn-lg" type="button">Large button</button>
<button class="btn btn-info" type="button">Default button</button>
<button class="btn btn-info btn-sm" type="button">Small button</button>
<button class="btn btn-info btn-xs" type="button">Mini button</button>

Primary Buton
<button class="btn btn-primary btn-lg" type="button">Large button</button>
<button class="btn btn-primary" type="button">Default button</button>
<button class="btn btn-primary btn-sm" type="button">Small button</button>
<button class="btn btn-primary btn-xs" type="button">Mini button</button>

author

Thank You For Visit Bootstrap Divider Blog and reading our Article
The Resources For Inspiration Designers and Web Developers.

Button Bootstrap metro style 11:00 AM
Posted on Category: