#Buttons
Cirrus provides minimally designed buttons created to work well with any website. It is also minimally designed to provide a blank canvas for designers to craft custom buttons for any design.
Basic options
Non-animated buttons.
<div>
<div class="btn">test</div>
</div>
<div>
<button>Regular Button</button>
</div>
<div>
<input type="submit" value="Submit"/>
</div>;
Animated
<div>
<div class="btn btn-primary btn-animated">test</div>
</div>
<div>
<button class="btn-primary btn-animated">Regular Button</button>
</div>
<div>
<input type="submit" class="btn-primary btn-animated" value="Submit"/>
</div>
States
Disabled buttons.
Please note that using <div class="btn">test</div>
is not supported.
<div>
<button disabled class="btn-animated">Regular Button</button>
</div>
<div>
<input disabled type="submit" class="btn-animated" value="Submit"/>
</div>
Disabled primary button.
Please note that using <div class="btn">test</div>
is not supported.
<div>
<button disabled class="btn-animated btn-primary">Regular Button</button>
</div>
<div>
<input disabled type="submit" class="btn-animated btn-primary" value="Submit"/>
</div>
Styles
Themed
<div class="mx-1">
<button class="btn">Plain</button>
</div>
<div class="mx-1">
<button class="btn-primary">Primary</button>
</div>
<div class="mx-1">
<button class="btn-transparent">Transparent</button>
</div>
<div class="mx-1">
<button class="btn-light">Light</button>
</div>
<div class="mx-1">
<button class="btn-dark">Dark</button>
</div>
<div class="mx-1">
<button class="btn-black">Black</button>
</div>
<div class="mx-1">
<button class="btn-info">Info</button>
</div>
<div class="mx-1">
<button class="btn-link">Link</button>
</div>
<div class="mx-1">
<button class="btn-success">Success</button>
</div>
<div class="mx-1">
<button class="btn-warning">Warning</button>
</div>
<div class="mx-1">
<button class="btn-danger">Danger</button>
</div>
Outline
<div class="mx-1">
<button class="btn outline">Plain</button>
</div>
<div class="mx-1">
<button class="btn-primary outline">Primary</button>
</div>
<div class="mx-1">
<button class="btn-transparent outline">Transparent</button>
</div>
<div class="mx-1">
<button class="btn-light outline">Light</button>
</div>
<div class="mx-1">
<button class="btn-dark outline">Dark</button>
</div>
<div class="mx-1">
<button class="btn-black outline">Black</button>
</div>
<div class="mx-1">
<button class="btn-info outline">Info</button>
</div>
<div class="mx-1">
<button class="btn-link outline">Link</button>
</div>
<div class="mx-1">
<button class="btn-success outline">Success</button>
</div>
<div class="mx-1">
<button class="btn-warning outline">Warning</button>
</div>
<div class="mx-1">
<button class="btn-danger outline">Danger</button>
</div>
Legacy Styles
Transparent
<div>
<div class="btn btn-transparent">test</div>
</div>
<div>
<button class="btn-transparent">Regular Button</button>
</div>
<div>
<input type="submit" class="btn-transparent" value="Submit"/>
</div>
Light Gray
<div>
<div class="btn btn-light">test</div>
</div>
<div>
<button class="btn-light">Regular Button</button>
</div>
<div>
<input type="submit" class="btn-light" value="Submit"/>
</div>
Dark Gray
<div>
<div class="btn btn-dark">test</div>
</div>
<div>
<button class="btn-dark">Regular Button</button>
</div>
<div>
<input type="submit" class="btn-dark" value="Submit"/>
</div>
Black
<div>
<div class="btn btn-black">test</div>
</div>
<div>
<button class="btn-black">Regular Button</button>
</div>
<div>
<input type="submit" class="btn-black" value="Submit"/>
</div>
Sizes
Besides the regular button size, Cirrus allows you to choose which size buttons you want to use.
XSmall
<div>
<div class="btn btn-xsmall">test</div>
</div>
<div>
<button class="btn-xsmall">XSmall Button</button>
</div>
<div>
<input type="submit" class="btn-xsmall" value="Submit"/>
</div>
Small
<div>
<div class="btn btn-small">test</div>
</div>
<div>
<button class="btn-small">Small Button</button>
</div>
<div>
<input type="submit" class="btn-small" value="Submit"/>
</div>
Large
<div>
<div class="btn btn-large">test</div>
</div>
<div>
<button class="btn-large">Large Button</button>
</div>
<div>
<input type="submit" class="btn-large" value="Submit"/>
</div>
Extra Large
<div>
<div class="btn btn-xlarge">test</div>
</div>
<div>
<button class="btn-xlarge">Extra Large Button</button>
</div>
<div>
<input type="submit" class="btn-xlarge" value="Submit"/>
</div>
Font Awesome
Font awesome integration is extremly easy with Cirrus without additional CSS.
Glyph on the right.
Glyph on the left.
Different glyph sizes.
<button class="btn-xsmall">XSmall<i class="fa-wrapper fa fa-chevron-right pad-left "></i></button>
<button class="btn-small">Small<i class="fa-wrapper fa fa-chevron-right pad-left "></i></button>
<button>Normal<i class="fa-wrapper fa fa-chevron-right pad-left"></i></button>
<button class="btn-large">Large<i class="fa-wrapper fa fa-chevron-right pad-left"></i></button>
<button class="btn-xlarge">Extra Large<i class="fa-wrapper fa fa-chevron-right pad-left "></i></button>