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.

<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-secondary">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

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-secondary">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

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

CSS variables

You can customize the style of buttons using the following CSS variables.

.button {
  --border-width: 1px;
  --border-color: var(--color-light-grey);
  --font-size: 1rem;
  --line-height: 1.6;
  --margin-bottom: 0.4rem;
  --padding: 0.5rem 0.75rem;
  --transition: border-color 0.2s ease, background-color 0.3s ease;
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --button-radius: 0;

  --hover-background-color: var(--color-white);
  --hover-font-color: var(--color-black);
  --hover-border-color: var(--color-light-grey-darker);
}
Copy

Create additional themed buttons by updating the background, font & border variables.

.button.is-orange {
  --background-color: #e28945;
  --border-color: transparent;
  --font-color: #ffffff;
}
Copy

These variables control the styling for the loading spinner.

.button {
  --loading-speed: 0.8s;
  --loading-width: 2px;
  --loading-color: var(--color-light-grey);
}
Copy

Set the gap between buttons within the button group using the --gap variable.

.is-button-group {
  --gap: 0.4rem;
}
Copy

Use the following CSS variables to override the default styling for the close button element.

.button--close {
  --background-color: hsl(0deg, 0%, 22%, 0.23);
  --icon-color: inherit;
  --height: 1.5rem;
  --width: 1.5rem;
  --icon-width: 1px;
  --hover-background-color: hsl(0deg, 0%, 22%, 0.41);
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.