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:
button tag.btn class.input with type submit.a tag with the btn class.<button>Button</button>
<div class="btn">Button</div>
<input type="submit" value="Submit">
<a class="btn">Button</a>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.
<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><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>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>