1.0.2

Buttons

Buttons or links dedicated to actions, are customizable, by colors, sizes and shapes.

<button class="ms-btn">default</button>

To adapt your button to your content, several colors are available.

<button class="ms-btn ms-info">ms-info</button>
<button class="ms-btn ms-success">ms-success</button>
<button class="ms-btn ms-danger">ms-danger</button>
<button class="ms-btn ms-warning">ms-warning</button>

The .ms-btn classe can be used on the <button> and also on the <a> or <input>.

<input type="submit" class="ms-success" value="Button">

For more informations on the icons used, consult the dedicated page.

Sizes

The buttons come in different sizes with the classes .ms-small, .ms-medium and .ms-large.

<button class="ms-btn ms-small">small</button>
<button class="ms-btn">default</button>
<button class="ms-btn ms-medium">medium</button>
<button class="ms-btn ms-large">large</button>

It is possible to extend the button to 100% of the width with the classe .ms-fullwith.

<button class="ms-btn ms-info ms-fullwidth">fullwidth</button>

Outline

The class .ms-outline-* allows you to obtain a button without background color. The colors are identical to those used on the classe .ms-btn.

<button class="ms-btn ms-outline-danger">Button</button>
<button class="ms-btn ms-outline-success">Button</button>

Rounded

You can also change the appearance of the buttons, by changing their angles with the .ms-rounded classe.

<button class="ms-btn ms-danger ms-rounded">Button</button>
<button class="ms-btn ms-outline-success ms-rounded">Button</button>

Shadow

To give more depth to your design, the .ms-shadow class allows you to add a shadow to the buttons.

<button class="ms-btn ms-shadow">Button</button>
<button class="ms-btn ms-success ms-shadow">Button</button>

Disabled

If you want to disable a button with the disabled attribute, it will have its opacity reduced by half. You can also use the .ms-disabled class on <a> to disable a link.

<button class="ms-btn" disabled>Button</button>
<button class="ms-btn ms-outline-warning" disabled>Button</button>
← BreadcrumbCards →