Skip to main content
Version: 2.0.2

Button

Buttons or links dedicated to actions, are customizable, by colors, sizes and shapes. The .ms-btn classe can be used on the <button> and also on the <a> or <input>.

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

Basic usage

Live Editor
Result
Loading...

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

Generate minstyle.io CSS with your custom colors.

Live Editor
Result
Loading...

Sizes

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

Live Editor
Result
Loading...

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

Live Editor
Result
Loading...

Outline

The class .ms-outline allows you to obtain a button without background color, but with a border.

Live Editor
Result
Loading...

Underline

The class .ms-underline allows you to obtain a button without background color, but with a bottom border.

Live Editor
Result
Loading...

Rounded

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

Live Editor
Result
Loading...

Active button

A button can be activated using the .ms-btn-active classe.

Live Editor
Result
Loading...

Loading button

You can also add a loader to the button with the loading components.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

Shadow

Finally, it is also possible to add a shadow with the helper class .ms-box-shadow.

Live Editor
Result
Loading...