#Variants
Besides your typical clickable button, buttons also come in other forms to support other use case.
Besides your typical clickable button, buttons also come in other forms to support other use case.
The .btn-animated
class adds a slight "push" to the button when clicked.
<button class="btn-animated">Button</button>
<div class="btn btn-animated">Button</div>
<input class="btn-animated" type="submit" value="Submit" />
Add the disabled
keyword to make the button unselectable.
Note that this is not supported for buttons created using div
tags.
<button disabled>Disabled</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>
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>
Modifier classes can be used to change the shape of a button as shown below.
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>
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>