Button

Primary Buttons

Use these default button styles with multiple colors to indicate an action or link within your website.

<button class="btn btn-primary">Button</button>
<button class="btn btn-primary btn-md">Button</button>
<button class="btn btn-primary btn-lg">Button</button>
<button class="btn btn-primary btn-xl">Button</button>
<button class="btn btn-primary btn-2xl">Button</button>
html

Secondary Buttons

Some secondary buttons can be used along with primary buttons to indicate actions that are not the primary action on the page.

<button class="btn btn-secondary btn-rounded">Button</button>
<button class="btn btn-secondary btn-rounded btn-md">Button</button>
<button class="btn btn-secondary btn-rounded btn-lg">Button</button>
<button class="btn btn-secondary btn-rounded btn-xl">Button</button>
<button class="btn btn-secondary btn-rounded btn-2xl">Button</button>
html

Outline Buttons

Outline Buttons are a nice way to show secondary action as well

<button class="btn btn-outline">Button</button>
<button class="btn btn-outline btn-md">Button</button>
<button class="btn btn-outline btn-lg">Button</button>
<button class="btn btn-outline btn-xl">Button</button>
<button class="btn btn-outline btn-2xl">Button</button>
html

Rounded Buttons

You can apply rounded class to make them rounded

<button class="btn btn-rounded">Button</button>
<button class="btn btn-rounded btn-md">Button</button>
<button class="btn btn-rounded btn-lg">Button</button>
<button class="btn btn-rounded btn-xl">Button</button>
<button class="btn btn-rounded btn-2xl">Button</button>
html