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 three ways to create a button:
button tag.btn class.input with type submit.<button>Button</button>
<div class="btn">Button</div>
<input type="submit" value="Submit">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 xsmall, small, large, and xlarge.
<button class="text-blue-600 bg-blue-100 btn-xsmall">Xsmall</button>
<button class="text-blue-600 bg-blue-100 btn-small">Small</button>
<button class="text-blue-600 bg-blue-100 btn-large">Large</button>
<button class="text-blue-600 bg-blue-100 btn-xlarge">Xlarge</button>