Button

A simple and customizable button

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.

Basic

Create a basic button using the button class.

<button class="button">I'm a button</button>
Copy

The button class can be applied to most elements but works best with the button , input and a tags.

I'm a button
<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">
Copy

Style

Colors

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 
Copy

When using the color palette to style your buttons, the text color will be automatically calculated depending on the selected palette color.

Outline

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 
Copy

Rounded

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

Sizing

Buttons come with three different sizes:

  • Small
  • Normal
  • Large

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

Full width

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

Controls

Active

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

Disabled

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

Loading

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

Grouping

Button group

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

Addon group

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

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

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

Alignment

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

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

These modifiers are not specific to the Button module and can be found within the OrbitCSS global modifiers.


Icons

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 
Copy

Close button

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

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

Variables

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