Buttons are usually used to trigger an action.


Easy.css provides several several button styles, each with a different purpose.

<button class="btn">Button</button>
<button class="btn secondary">Secondary</button>
<button class="btn primary">Primary</button>
<button class="btn success">Success</button>
<button class="btn danger">Danger</button>
<button class="btn warning">Warning</button>
<button class="btn info">Info</button>

Outline Button:

Outline Button is a button with a border with no background color. Background color is transparent unless u hover over the button. They are similar to the buttons in the previous example.

<button class="btn outline-primary">Outline Button Primary</button>
<button class="btn outline-secondary">Outline Button Secondary</button>
<button class="btn outline-success">Outline Button Success</button>
<button class="btn outline-danger">Outline Button Danger</button>
<button class="btn outline-warning">Outline Button Warning</button>
<button class="btn outline-info">Outline Button Info</button>

Disabled Button:

Disabled buttons are used to indicate that a button is unavailable. They are most commonly used for secondary actions and are usually used in forms to indicate that a button is disabled when the form has some error or the user did not fill out the form correctly.

<button class="btn" disabled>Disabled</button>

Button Size:

Easy.css provides several sizes for buttons. The size of a button indicates how much space it should take up.

<button class="btn primary small">Small</button>
<button class="btn primary">Default</button>
<button class="btn primary large">Large</button>

Round Button:

Round buttons are used to indicate an action that is important and should be done quickly.

<button class="btn round">+</button>
<button class="btn round primary">+</button>
<button class="btn round secondary">+</button>
<button class="btn round success">+</button>
<button class="btn round danger">+</button>
<button class="btn round warning">+</button>
<button class="btn round info">+</button>

Long Button:

A long button is a button that spans the full width of its container. A long button is used for actions that require more space.

<div class="long-grid">
  <button class="btn primary long">Long</button>
  <button class="btn secondary long">Long Secondary Button</button>