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

<div> <input type="submit" value="Submit" /> <a href="#" class="ms-btn">Link</a> <button class="ms-btn">Button</button> </div>

<div>
  <input type="submit" value="Submit" />
  <a href="#" class="ms-btn">Link</a>
  <button class="ms-btn">Button</button>
</div>

Result

Link

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

Generate minstyle.io CSS with your custom colors.

Live Editor

<div> <button class="ms-btn">.ms-primary</button> <button class="ms-btn ms-primary"><i class="fa-solid fa-thumbs-up"></i> .ms-primary</button> <button class="ms-btn ms-secondary"><i class="fa-solid fa-building-circle-check"></i> .ms-secondary</button> <button class="ms-btn ms-action"><i class="fa-solid fa-calendar-check"></i> .ms-action</button> <button class="ms-btn ms-action2"><i class="fa-solid fa-file-circle-check"></i> .ms-action2</button> </div>

<div>
  <button class="ms-btn">.ms-primary</button>
  <button class="ms-btn ms-primary"><i class="fa-solid fa-thumbs-up"></i> .ms-primary</button>
  <button class="ms-btn ms-secondary"><i class="fa-solid fa-building-circle-check"></i> .ms-secondary</button>
  <button class="ms-btn ms-action"><i class="fa-solid fa-calendar-check"></i> .ms-action</button>
  <button class="ms-btn ms-action2"><i class="fa-solid fa-file-circle-check"></i> .ms-action2</button>
</div>

Result

Sizes

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

Live Editor

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

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

Result

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

Live Editor

<div> <button class="ms-btn ms-primary ms-fullwidth"><i class="fa-solid fa-maximize"></i> .ms-fullwidth</button> </div>

<div>
  <button class="ms-btn ms-primary ms-fullwidth"><i class="fa-solid fa-maximize"></i> .ms-fullwidth</button>
</div>

Result

Outline

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

Live Editor

<div> <button class="ms-btn ms-outline">.ms-outline</button> <button class="ms-btn ms-outline ms-primary">.ms-outline</button> <button class="ms-btn ms-outline ms-secondary">.ms-outline</button> <button class="ms-btn ms-outline ms-action">.ms-outline</button> <button class="ms-btn ms-outline ms-action2">.ms-outline</button> </div>

<div>
  <button class="ms-btn ms-outline">.ms-outline</button>
  <button class="ms-btn ms-outline ms-primary">.ms-outline</button>
  <button class="ms-btn ms-outline ms-secondary">.ms-outline</button>
  <button class="ms-btn ms-outline ms-action">.ms-outline</button>
  <button class="ms-btn ms-outline ms-action2">.ms-outline</button>
</div>

Result

Underline

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

Live Editor

<div> <button class="ms-btn ms-underline">.ms-underline</button> <button class="ms-btn ms-underline ms-primary">.ms-underline</button> <button class="ms-btn ms-underline ms-secondary">.ms-underline</button> <button class="ms-btn ms-underline ms-action">.ms-underline</button> <button class="ms-btn ms-underline ms-action2">.ms-underline</button> </div>

<div>
  <button class="ms-btn ms-underline">.ms-underline</button>
  <button class="ms-btn ms-underline ms-primary">.ms-underline</button>
  <button class="ms-btn ms-underline ms-secondary">.ms-underline</button>
  <button class="ms-btn ms-underline ms-action">.ms-underline</button>
  <button class="ms-btn ms-underline ms-action2">.ms-underline</button>
</div>

Result

Rounded

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

Live Editor

<div> <button class="ms-btn ms-rounded"><i class="fa-solid fa-burger"></i> .ms-rounded</button> <button class="ms-btn ms-outline ms-rounded"><i class="fa-solid fa-burger"></i> .ms-rounded</button> </div>

<div>
  <button class="ms-btn ms-rounded"><i class="fa-solid fa-burger"></i> .ms-rounded</button>
  <button class="ms-btn ms-outline ms-rounded"><i class="fa-solid fa-burger"></i> .ms-rounded</button>
</div>

Result

Loading button

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

Live Editor

<button class="ms-btn ms-primary"> <div class="ms-loading ms-small ms-primary"></div> Loading </button>

<button class="ms-btn ms-primary">
    <div class="ms-loading ms-small ms-primary"></div> Loading
</button>

Result

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

<div> <button class="ms-btn" disabled> Button </button> <button class="ms-btn ms-disabled">Button</button> </div>

<div>
  <button class="ms-btn" disabled>
    Button
  </button>
  <button class="ms-btn ms-disabled">Button</button>
</div>

Result

Shadow

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

Live Editor

<div> <button class="ms-btn ms-primary ms-rounded ms-box-shadow">.ms-rounded</button> </div>

<div>
  <button class="ms-btn ms-primary ms-rounded ms-box-shadow">.ms-rounded</button>
</div>

Result