#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-primary btn-animated">test</div>
</div>
<div class="btn-container">
    <button class="btn-primary btn-animated">Regular Button</button>
</div>
<div class="btn-container">
    <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 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 primary button.

Please note that using <div class="btn">test</div> is not supported.

<div class="btn-container">
    <button disabled class="btn-animated btn-primary">Regular Button</button>
</div>
<div class="btn-container">
    <input disabled type="submit" class="btn-animated btn-primary" value="Submit"/>
</div>

Styles

Themed

<div class="col">
    <button class="btn">Plain</button>
</div>
<div class="col">
    <button class="btn-primary">Primary</button>
</div>
<div class="col">
    <button class="btn-transparent">Transparent</button>
</div>
<div class="col">
    <button class="btn-light">Light</button>
</div>
<div class="col">
    <button class="btn-dark">Dark</button>
</div>
<div class="col">
    <button class="btn-black">Black</button>
</div>
<div class="col">
    <button class="btn-info">Info</button>
</div>
<div class="col">
    <button class="btn-link">Link</button>
</div>
<div class="col">
    <button class="btn-success">Success</button>
</div>
<div class="col">
    <button class="btn-warning">Warning</button>
</div>
<div class="col">
    <button class="btn-danger">Danger</button>
</div>

Outline

<div style="margin: 0 0.5rem">
    <button class="btn outline">Plain</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-primary outline">Primary</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-transparent outline">Transparent</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-light outline">Light</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-dark outline">Dark</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-black outline">Black</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-info outline">Info</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-link outline">Link</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-success outline">Success</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-warning outline">Warning</button>
</div>
<div style="margin: 0 0.5rem">
    <button class="btn-danger outline">Danger</button>
</div>

Legacy Styles

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.

<a href=""><button>See More<i class="fa-wrapper fa fa-chevron-right pad-left"></i></button></a>

Glyph on the left.

<a href=""><button><i class="fa-wrapper fa fa-chevron-left pad-right"></i>See More</button></a>

Different glyph sizes.

<a href=""><button class="btn-tiny">Tiny<i class="fa-wrapper fa fa-chevron-right pad-left "></i></button></a>

<a href=""><button class="btn-small">Small<i class="fa-wrapper fa fa-chevron-right pad-left "></i></button></a>

<a href=""><button>Normal<i class="fa-wrapper fa fa-chevron-right pad-left"></i></button></a>

<a href=""><button class="btn-large">Large<i class="fa-wrapper fa fa-chevron-right pad-left"></i></button></a>

<a href=""><button class="btn-xlarge">Extra Large<i class="fa-wrapper fa fa-chevron-right pad-left "></i></button></a>

#Button Groups

Button groups are designed to group buttons of similar actions or properties together in a seemless fashion. Buttons are placed adjacent to each other and buttons at each of the ends are rounded off respectively.

 <div class="btn-group">
    <button class="btn-primary">First Button</button>
    <button class="btn-primary">Second Button</button>
    <button class="btn-primary">Third Button</button>
</div>

Just nest the buttons you want to be in a group inside a btn-group container and Cirrus will handle the rest.

 <div class="btn-group">
    <button class="btn-primary">First Button</button>
    <button class="btn-primary">Second Button</button>
    <button class="btn-primary">Third Button</button>
</div>

If you want the buttons to flex to fill the width of the container, just add the btn-group-fill class to the btn-group container.

<div class="btn-group btn-group-fill">
    <button class="btn-dark">Look</button>
    <button class="btn-dark">At</button>
    <button class="btn-dark">Me</button>
    <button class="btn-dark">Flex</button>
</div>
<br>
<div class="btn-group btn-group-fill">
    <button class="">First Button</button>
    <button class="">Second Button</button>
</div>
<br>
<div class="btn-group">
    <button class="">No</button>
    <button class="">Fill</button>
</div>

• Previous

  Animations

• Next

  Components