#Buttons

Buttons in Cirrus come with some basic styling to help you get started. You can choose some of the different variants of buttons shown below or you can use the utility classes to customize it yourself.

There are 4 ways to create a button:

Use the button tag.
Use the btn class.
Use an input with type submit.
Use an a tag with the btn class.

Button

<button>Button</button>
<div class="btn">Button</div>
<input type="submit" value="Submit">
<a class="btn">Button</a>

#Colors

Cirrus comes in quite a few different shades of colors. Below are some of the preset styles that you can use for your button that are core to the framework.

Solid

<button class="">Plain</button>
<button class="btn-transparent">transparent</button>
<button class="btn-light">light</button>
<button class="btn-dark">dark</button>
<button class="btn-black">black</button>
<button class="btn-primary">primary</button>
<button class="btn-link">link</button>
<button class="btn-info">info</button>
<button class="btn-success">success</button>
<button class="btn-warning">warning</button>
<button class="btn-danger">danger</button>

Outline

<button class="outline btn-transparent">transparent</button>
<button class="outline btn-light">light</button>
<button class="outline btn-dark">dark</button>
<button class="outline btn-black">black</button>
<button class="outline btn-primary">primary</button>
<button class="outline btn-link">link</button>
<button class="outline btn-info">info</button>
<button class="outline btn-success">success</button>
<button class="outline btn-warning">warning</button>
<button class="outline btn-danger">danger</button>

More Colors

New

0.7.2

Use color utility classes defined here for more customization. Cirrus automatically uses a hover color depending on your selected color's luminosity. Lighter backgrounds get darker on hover while the opposite occurs for darker backgrounds.

<div class="mx-1">
    <button class="bg-indigo-100 border-indigo-100 text-indigo-700">Indigo</button>
</div>
<div class="mx-1">
    <button class="bg-indigo-300 border-indigo-300 text-indigo-700">Indigo</button>
</div>
<div class="mx-1">
    <button class="bg-indigo-500 border-indigo-500 text-indigo-100">Indigo</button>
</div>
<div class="mx-1">
    <button class="bg-indigo-700 border-indigo-700 text-indigo-100">Indigo</button>
</div>
<div class="mx-1">
    <button class="bg-indigo-900 border-indigo-900 text-indigo-100">Indigo</button>
</div>

#Sizes

Buttons can have alternative sizes of xs, sm, lg, and xl.

<button class="text-blue-600 bg-blue-100 btn--xs">Extra Small</button>
<button class="text-blue-600 bg-blue-100 btn--sm">Small</button>
<button class="text-blue-600 bg-blue-100 btn--lg">Large</button>
<button class="text-blue-600 bg-blue-100 btn--xl">Extra Large</button>

Cirrus