Buttons are one of your page's essential elements, and something you will no doubt use repeatedly. OrbitCSS offers a clean looking button right out of the box, with the power to quickly customize it to ensure it perfectly fits your project.
Create a basic button using the button
class.
<button class="button">I'm a button</button>
The button
class can be applied to most elements but works best with the button
, input
and a
tags.
<button class="button">I'm a button</button>
<a href="#" class="button">I'm a button</a>
<input type="submit" class="button" value="I'm a button">
You can use the color palette to color your buttons by prefixing the name of a color with is-*
. For example to use the primary color you would add the is-primary
modifier to the button.
<button class="button is-primary">I'm a button</button>
<button class="button is-warning">I'm a button</button>
<button class="button is-danger">I'm a button</button>
<button class="button is-info">I'm a button</button>
<button class="button is-success">I'm a button</button>
<button class="button is-black">I'm a button</button>
<button class="button is-dark">I'm a button</button>
<button class="button is-night">I'm a button</button>
<button class="button is-light">I'm a button</button>
<button class="button is-light-grey">I'm a button</button>
<button class="button is-dark-grey">I'm a button</button>
</> Show code When using the color palette to style your buttons, the text color will be automatically calculated depending on the selected palette color.
The is-outline
modifier can be used if you do not want a button with a block color background. This modifier must always be used with the color palette modifier.
<button class="button is-outline is-primary">I'm a button</button>
<button class="button is-outline is-warning">I'm a button</button>
<button class="button is-outline is-danger">I'm a button</button>
<button class="button is-outline is-info">I'm a button</button>
<button class="button is-outline is-success">I'm a button</button>
<button class="button is-outline is-black">I'm a button</button>
<button class="button is-outline is-night">I'm a button</button>
<button class="button is-outline is-dark-grey">I'm a button</button>
</> Show code
The is-rounded
modifier will give the button rounded corners. You can edit the radius and give the button a pill shape using the $button-radius
variable.
<button class="button is-rounded">I'm a button</button>
<button class="button is-rounded is-primary">I'm a button</button>
Buttons come with three different sizes:
The default button is normal size. The is-small
and is-large
modifiers will change the size of the button to small or large.
<button class="button is-small">Small button</button>
<button class="button">Normal button</button>
<button class="button is-large">Large button</button>
Buttons only take up as much room as required to display their content. Use the is-full
modifier to force the button to take up the entire width of the parent element.
<button class="button is-full">I'm a button with full width</button>
You can simulate the :hover
state of a button with the is-active
modifier.
<button class="button is-active">Active button</button>
<button class="button is-active is-primary">Active button</button>
<button class="button is-active is-primary is-outline">Active button</button>
The disabled
HTML attribute can be used to disable the button and prevent a user from interacting with it.
<button class="button" disabled>Active button</button>
<button class="button is-primary" disabled>Active button</button>
<button class="button is-primary is-outline" disabled>Active button</button>
The is-loading
modifier can be used to hide the button's text and replace it with a loading animation. The loading state will disable pointer-events to prevent the user from interacting with the button.
<button class="button is-loading">Active button</button>
<button class="button is-loading is-primary">Active button</button>
<button class="button is-loading is-primary is-outline">Active button</button>
Use the is-button-group
modifier to evenly space buttons and allow for wrapping and custom alignment.
<div class="is-button-group">
<button class="button">I'm a button</button>
<button class="button is-primary">I'm a button</button>
<button class="button is-primary is-outline">I'm a button</button>
</div>
The is-addon-group
modifier can be used to connect buttons.
<div class="is-addon-group">
<button class="button">I'm a button</button>
<button class="button is-primary">I'm a button</button>
<button class="button is-primary is-outline">I'm a button</button>
</div>
The corners of the two outermost buttons can be rounded with the is-rounded
modifier.
<div class="is-addon-group is-rounded">
<button class="button">I'm a button</button>
<button class="button is-primary">I'm a button</button>
<button class="button is-primary is-outline">I'm a button</button>
</div>
You can even use the addon groups within the button group.
<div class="is-button-group">
<button class="button">I'm a lone button</button>
<div class="is-addon-group">
<button class="button">We are connected</button>
<button class="button is-primary">We are connected</button>
</div>
</div>
One of the key benefits of using groups is being able to align your buttons within the container.
The has-centered
modifier will align all of the buttons from the center of the group outwards.
<div class="is-button-group has-centered">
<button class="button">I'm a button</button>
<button class="button is-primary">I'm a button</button>
<button class="button is-primary is-outline">I'm a button</button>
</div>
The has-end
modifier will align all of the buttons at the end of the group container.
<div class="is-button-group has-end">
<button class="button">I'm a button</button>
<button class="button is-primary">I'm a button</button>
<button class="button is-primary is-outline">I'm a button</button>
</div>
These modifiers are not specific to the Button module and can be found within the OrbitCSS global modifiers.
You can use icons within a button by wrapping the icon element in the icon
class. Any text within the button have to be wrapped in a separate span
tag to ensure correct alignment.
<button class="button is-primary">
<span>Upload File</span>
<span class="icon">
<i class="fas fa-upload"></i>
</span>
</button>
<button class="button is-success">
<span>Save</span>
<span class="icon">
<i class="fas fa-save"></i>
</span>
</button>
<button class="button is-danger">
<span>Delete</span>
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
</> Show code
Close buttons are different from regular buttons and should be used separately. You can create a close button by using the button--close
class with an a
tag or span
tag.
<a class="button--close"></a>
Use the has-no-background
modifier if you want just want the cross without the grey background.
<a class="button--close has-no-background"></a>
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $button-type-sizes | list | 'small' 0.75rem, 'large' 1.375rem |
| $button-background | color | $white |
| $button-border-color | color | $light-grey |
| $button-border-width | units | 1px |
| $button-border-style | string | solid |
| $button-color | color | $black |
| $button-font-size | units | 1rem |
| $button-line-height | unitless | 1.6 |
| $button-margin-bottom | units | 0.4rem |
| $button-padding | padding | 0.5rem 0.75rem |
| $button-text-align | string | center |
| $button-hover-border | color | darken($light-grey, 10%) |
| $button-radius | units | 6px |
| $button-loading-animation | animation | spinner .8s linear infinite |
| $button-loading-width | units | 2px |
| $button-loading-color | color | $light-grey |
| $button-addon-radius | units | 6px |
| $button-group-gap | units | 0.4rem |
| $button-close-background | color | rgba(57, 57, 57, 0.23) |
| $button-close-height | units | 1.5rem |
| $button-close-width | units | 1.5rem |
| $button-close-hover | color | rgba(57, 57, 57, 0.41) |
| $button-cross-color | color | inherit |
| $button-cross-width | units | 1px |