#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.

test
 <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

test
<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

test
<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

test
<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

test
<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

test
 <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

test
<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

test
<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

test
<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

test
<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

test
<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

test
<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

test
<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 fa-chevron-right pad-left"></i></button></a>

Glyph on the left.

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

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>

#Button Tooltips

Cirrus adds a whole new dimension to buttons with tooltips. Specifying tooltip text requires no extra div but rather just 1 extra property within the buttons themselves allowing for easy customization physically or dynamically with JavaScript.


<div class="col-6 center">
    <button class="btn-accent btn-tooltip" data-tooltip="Tooltip 1">Button 1</button>
    <button class="btn-accent btn-tooltip" data-tooltip="Tooltip 2">Button 2</button>
    <button class="btn-accent btn-tooltip" data-tooltip="Tooltip 3">Button 3</button>
</div>
                        

The way this works is that the contents of the tooltip are specified by the data-tooltip attribute where the CSS would retrieve the data to be displayed.

Tooltip Direction

You can also add additional classes to specify which direction the tooltip should display. There are 4 different tooltip directions for now, including tooltip-bottom, tooltip-left, tooltip-right, and the default direction which displays the tooltip at the top. Other secondary directions will be added in a future update.

<button class="btn-tooltip" data-tooltip="Tooltip Top (Default)">Tooltip Top</button>
<button class="btn-tooltip tooltip-bottom" data-tooltip="Tooltip Bottom">Tooltip Bottom</button>
<button class="btn-tooltip tooltip-left" data-tooltip="Tooltip Left">Tooltip Left</button>
<button class="btn-tooltip tooltip-right" data-tooltip="Tooltip Right">Tooltip Right</button>

#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-accent">First Button</button>
    <button class="btn-accent">Second Button</button>
    <button class="btn-accent">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-accent">First Button</button>
    <button class="btn-accent">Second Button</button>
    <button class="btn-accent">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>