Skip to main content

Buttons

A wide variety of buttons and styles, you can choose between a rounded, flat or slightly border-radius style. The primary, secondary, and tertiary colors will vary their color depending on the color palettes you have in your tailwind.config.js in case you choose to import it tailwindcss style.

Default buttons​

Other classes: button-primary, button-secondary, button-tertiary, button-danger, button-warning, button-success, and button-info.

<button class="button button-primary">
  Primary
</button>

Outline default​

Other classes: button-primary-outline, button-secondary-outline, button-tertiary-outline, button-danger-outline, button-warning-outline, button-success-outline, and button-info-outline.

<button class="button button-primary-outline">
  Primary
</button>

Semi-transparent default​

Just add the class semi-transparent`.

<button class="button button-primary semi-transparent">
  Primary
</button>

Just add the class link.

<button class="button button-primary link">
  Primary
</button>

Flat Buttons​

Other classes: button-primary-flat, button-secondary-flat, button-tertiary-flat, button-danger-flat, button-warning-flat, button-success-flat, and button-info-flat

<button class="button button-primary-flat">
  Primary
</button>

Outline flat​

Other classes: button-primary-flat-outline, button-secondary-flat-outline, button-tertiary-flat-outline, button-danger-flat-outline, button-warning-flat-outline, button-success-flat-outline, and button-info

<button class="button button-primary-flat-outline">
  Primary
</button>

Semi-transparent flat​

Just add the class semi-transparent.

<button class="button button-primary-flat semi-transparent">
  Primary
</button>

Just add the class link.

<button class="button button-primary-flat link">
  Primary
</button>

Rounded buttons​

Other classes: button-primary-rounded, button-secondary-rounded, button-tertiary-rounded, button-danger-rounded, button-warning-rounded, button-success-rounded, and button-info-rounded.

<button class="button button-primary-rounded">
  Primary
</button>

Outline rounded​

Other classes: button-primary-rounded-outline, button-secondary-rounded-outline, button-tertiary-rounded-outline, button-danger-rounded-outline, button-warning-rounded-outline, button-success-rounded-outline, and button-info-rounded-outline.

<button class="button button-primary-rounded-outline">
  Primary
</button>

Semi-transparent rounded​

Just add the class semi-transparent.

<button class="button button-primary-rounded semi-transparent">
  Primary
</button>
<button class="button button-primary-rounded link">
  Primary
</button>