#Variants

Besides your typical clickable button, buttons also come in other forms to support other use case.

#Animated Button

The .btn-animated class adds a slight "push" to the button when clicked.

Button

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

#Disabled Button

Add the disabled keyword to make the button unselectable. The same effect can also be achieved using the btn--disabled class.

Note that the disabled attribute is not supported in a and div based buttons according to the HTML spec. You must use the btn--disabled class.

Disabled

<button class="btn-info btn--disabled">Disabled</button>
<div class="btn btn-info btn--disabled">Disabled</div>
<input class="btn-info" type="submit" disabled value="Submit Disabled" />
<a href="#" class="btn btn-info btn--disabled">Disabled</a>

#Loading Button

Add the .animated and .loading classes to create a button containing a spinner. Since it relies on the button to contain text for height, you must specify some text. To hide the text, you just need to add the .hide-text class as well.

<button class="animated loading hide-text">123</button>

To display text, there are two helper classes created to show text to the left and right of the spinner.

To set the spinner to appear to the left of text, use the .loading-left class.

<button class="animated loading loading-left btn-link">Loading</button>

To set the spinner to appear to the right of text, use the .loading-right class.

<button class="animated loading loading-right btn-link">Loading</button>

#Close Button

This is the generic close button control that can be added to other components in Cirrus. Below is an example of a .frame containing a .btn-close.

You can close me now.

<div class="frame">
    <div class="frame__header"><span class="pb-1"><b>This is a popup.</b></span>
        <button class="btn-close u-pull-right"></button>
    </div>
    <div class="frame__body">
        <p>You can close me now.</p>
    </div>
</div>

#Shapes

Modifier classes can be used to change the shape of a button as shown below.

Pilled

This provides a rounded shape for the button that closely resembles a pill with the btn--pilled class.

<button class="btn-info btn--pilled">Test</button>

Circle

The btn--circle class turns a button into a circle. The circle size will scale based on the contents of the button.

<button class="btn-danger btn--circle"><b>Small</b></button>
<button class="btn-warning btn--circle"><h6 class="px-2">Bigger</h6></button>
<button class="btn-success btn--circle"><h3 class="px-2">Biggest</h3></button>

Cirrus