Monk opensource

Simple button fixed class: btn

First add the class btn, for the default settings, it has a default height of 40px height and font-size of 12px.

<button class="btn">Sent</button>

<button class="btn btn-primary">Sent</button>

<button class="btn btn-success">Complete</button>

<button class="btn btn-danger">Cancel</button>

<button class="btn btn-danger" disabled>Cancel</button>

btn class is required on all buttons.

Button with icon

We use Font-awesome.
To use the icons just follow the pattern.

  <button class="btn"><i class="fa fa-location-arrow" aria-hidden="true"></i></button>

  <button class="btn btn-primary"><i class="fa fa-bars" aria-hidden="true"></i></button>

  <button class="btn btn-success"><i class="fa fa-check" aria-hidden="true"></i></button>

  <button class="btn btn-danger"><i class="fa fa-times" aria-hidden="true"></i></button>

btn class is required on all buttons.

Simple button with border fixed class: btn-border

First add the class btn-border, for the default settings, it has a default height of 40px height and font-size of 12px.

<button class="btn-border">Complete</button>

<button class="btn-border btn-border-primary">Sent</button>

<button class="btn-border btn-border-success"><i class="fa fa-check" aria-hidden="true"></i>  Accept</button>

<button class="btn-border btn-border-danger"><i class="fa fa-times" aria-hidden="true"></i>  Cancel</button>

btn-border class is required on all buttons.

Button small add class: btn-small

If you prefer it smaller (height: 25px font-size: 10px), add the btn-small class.

<button class="btn btn-small">Sent</button>

<button class="btn btn-primary btn-small">Sent</button>

<button class="btn btn-success btn-small">Complete</button>

<button class="btn btn-danger btn-small">Cancel</button>

<button class="btn bg-midnightblue btn-small"><i class="fa fa-edit" aria-hidden="true"></i> Edit</button>

<button class="btn-border btn-border-danger btn-small">Cancel</button>

Button big add class: btn-big

If you prefer it bigger (height: 60px; font-size: 22px;) add btn-big.

<button class="btn btn-big">Sent</button>

<button class="btn btn-primary btn-big">Sent</button>

<button class="btn btn-success btn-big">Complete</button>

<button class="btn btn-danger btn-big">Cancel</button>

<button class="btn-border btn-big btn-border-danger">Cancel</button>

Button size pre-defined add class: btn-size

The size is 300px with max-size 100%

<button class="btn btn-success btn-size">Yes</button>

<button class="btn btn-danger btn-size">No</button>

<button class="btn-border btn-border-success btn-size">Yes</button>

<button class="btn-border btn-border-danger btn-size">No</button>

<button class="btn-big btn-border btn-border-success btn-size"><i class="fa fa-check" aria-hidden="true"></i></button>

<button class="btn-big btn-border btn-border-danger btn-size"><i class="fa fa-times" aria-hidden="true"></i></button>

Simple button radius(4px) add class: btn-radius

<button class="btn btn-radius">Sent</button>

<button class="btn btn-primary btn-radius">Sent</button>

<button class="btn btn-success btn-radius">Complete</button>

<button class="btn btn-danger btn-radius">Cancel</button>

<button class="btn-border btn-border-danger btn-radius">Cancel</button>

Simple button rounded add class: btn-rounded

<button class="btn btn-rounded">Sent</button>

<button class="btn btn-primary btn-rounded">Sent</button>

<button class="btn btn-success btn-rounded">Complete</button>

<button class="btn btn-danger btn-rounded">Cancel</button>

<button class="btn-border btn-border-danger btn-rounded">Cancel</button>

<button class="btn bg-midnightblue btn-rounded"><i class="fa fa-2x fa-times" aria-hidden="true"></i></button>

<button class="btn bg-pomegranate btn-rounded"><i class="fa fa-2x fa-trash" aria-hidden="true"></i></button>

Button full add class: btn-full

<button class="btn btn-full">Sent</button>

<button class="btn btn-primary btn-radius btn-full">Sent</button>

<button class="btn btn-success btn-rounded btn-full">Complete</button>

<button class="btn btn-danger btn-small btn-full">Cancel</button>

<button class="btn btn-danger btn-rounded btn-big btn-full">Cancel</button>

<button class="btn-border btn-rounded btn-border-danger btn-full">Cancel</button>

Style button with bg class

You can style the buttons with all background-colors of our palette, check out Colors

<button class="btn bg-turquoise">Sent</button>

<button class="btn bg-greensea">Sent</button>
...

Style button with colors class

You can style the buttons with all colors of our palette, check out Colors

<button class="btn color-turquoise">Sent</button>

<button class="btn color-greensea">Sent</button>
...

Style button with border class