#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. By default, buttons will be placed next to each other with no space. By wrapping each button with a btn-container
div.
Basic options
Non-animated buttons.
<div class="btn-container">
<div class="btn">test</div>
</div>
<div class="btn-container">
<button>Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" value="Submit"/>
</div>;
Animated
<div class="btn-container">
<div class="btn btn-animated">test</div>
</div>
<div class="btn-container">
<button class="btn-animated">Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-animated" value="Submit"/>
</div>
States
Disabled buttons.
Please note that using <div class="btn">test</div>
is not supported.
<div class="btn-container">
<button disabled class="btn-animated">Regular Button</button>
</div>
<div class="btn-container">
<input disabled type="submit" class="btn-animated" value="Submit"/>
</div>
Disabled accented button.
Please note that using <div class="btn">test</div>
is not supported.
<div class="btn-container">
<button disabled class="btn-animated btn-accent">Regular Button</button>
</div>
<div class="btn-container">
<input disabled type="submit" class="btn-animated btn-accent" value="Submit"/>
</div>
Styles
Accent
<div class="btn-container">
<div class="btn btn-accent">test</div>
</div>
<div class="btn-container">
<button class="btn-accent">Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-accent" value="Submit"/>
</div>
Outline
<div class="btn-container">
<div class="btn btn-outline">test</div>
</div>
<div class="btn-container">
<button class="btn-outline">Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-outline" value="Submit"/>
</div>
Inverted Outline
<div class="btn-container">
<div class="btn btn-outline-inverted">test</div>
</div>
<div class="btn-container">
<button class="btn-outline-inverted">Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-outline-inverted" value="Submit"/>
</div>
Transparent
<div class="btn-container">
<div class="btn btn-transparent">test</div>
</div>
<div class="btn-container">
<button class="btn-transparent">Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-transparent" value="Submit"/>
</div>
Light Gray
<div class="btn-container">
<div class="btn btn-light">test</div>
</div>
<div class="btn-container">
<button class="btn-light">Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-light" value="Submit"/>
</div>
Dark Gray
<div class="btn-container">
<div class="btn btn-dark">test</div>
</div>
<div class="btn-container">
<button class="btn-dark">Regular Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-dark" value="Submit"/>
</div>
Black
<div class="btn-container">
<div class="btn btn-black">test</div>
</div>
<div class="btn-container">
<button class="btn-black">Regular Button</button>
</div>
<div class="btn-container">
<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.
Tiny
<div class="btn-container">
<div class="btn btn-tiny">test</div>
</div>
<div class="btn-container">
<button class="btn-tiny">Tiny Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-tiny" value="Submit"/>
</div>
Small
<div class="btn-container">
<div class="btn btn-small">test</div>
</div>
<div class="btn-container">
<button class="btn-small">Small Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-small" value="Submit"/>
</div>
Large
<div class="btn-container">
<div class="btn btn-large">test</div>
</div>
<div class="btn-container">
<button class="btn-large">Large Button</button>
</div>
<div class="btn-container">
<input type="submit" class="btn-large" value="Submit"/>
</div>
Extra Large
<div class="btn-container">
<div class="btn btn-xlarge">test</div>
</div>
<div class="btn-container">
<button class="btn-xlarge">Extra Large Button</button>
</div>
<div class="btn-container">
<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.
<a href=""><button class="btn-tiny">Tiny<i class="fa fa-chevron-right pad-left "></i></button></a>
<a href=""><button class="btn-small">Small<i class="fa fa-chevron-right pad-left "></i></button></a>
<a href=""><button>Normal<i class="fa fa-chevron-right pad-left"></i></button></a>
<a href=""><button class="btn-large">Large<i class="fa fa-chevron-right pad-left"></i></button></a>
<a href=""><button class="btn-xlarge">Extra Large<i class="fa fa-chevron-right pad-left "></i></button></a>
<a href=""><button class="btn-xxlarge">Extra Extra Large<i class="fa fa-chevron-right pad-left "></i></button></a>