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.


VariableTypeDefault value
$button-type-sizeslist'small' 0.75rem,
'large' 1.375rem
$button-backgroundcolor$white
$button-border-colorcolor$light-grey
$button-border-widthunits1px
$button-border-stylestringsolid
$button-colorcolor$black
$button-font-sizeunits1rem
$button-line-heightunitless1.6
$button-margin-bottomunits0.4rem
$button-paddingpadding0.5rem 0.75rem
$button-text-alignstringcenter
$button-hover-bordercolordarken($light-grey, 10%)
$button-radiusunits6px
$button-loading-animationanimationspinner .8s linear infinite
$button-loading-widthunits2px
$button-loading-colorcolor$light-grey
$button-addon-radiusunits6px
$button-group-gapunits0.4rem
$button-close-backgroundcolorrgba(57, 57, 57, 0.23)
$button-close-heightunits1.5rem
$button-close-widthunits1.5rem
$button-close-hovercolorrgba(57, 57, 57, 0.41)
$button-cross-colorcolorinherit
$button-cross-widthunits1px