Buttons - TL;DR:

The base class: o-btn

link The base class: o-btn

To style an element as a button, use the o-btn class. This class carries all the base styles for a button add it to every element you want to style as a button.

The base utility class

o-btn

Resulting html

<a href="#" class="o-btn">o-btn</a>

o-btn

Button modifiers

link Button modifiers

To add specific styles to a button, add a modifier class to the o-btn class. Do not use the modifier class alone.

Example: Brand Gradient Button

link Example: Brand Gradient Button

The Brand Gradient modifier class

o-btn-brand-gr

Create a Brand Gradient button

<a href="#" class="o-btn o-btn-brand-gr">o-btn-brand-gr</a>

o-btn + o-btn-brand-gr

Example: Outline Button

link Example: Outline Button

The Outline modifier class

o-btn-outline

Create an Outline button

<a href="#" class="o-btn o-btn-outline">o-btn-outline</a>

o-btn + o-btn-outline

Combine modifiers

link Combine modifiers

You can combine multiple modifiers to create a button with multiple styles.

Create an Accent Gradient Outline button

<a href="#" class="o-btn o-btn-accent-gr o-btn-outline"
  >o-btn-accent-gr + o-btn-outline</a
>

o-btn + o-btn-accent-gr + o-btn-outline

Check all available modifiers in the Button Modifiers documentation.

Buttons Customization

link Buttons Customization

To customize the buttons, use the buttons CSS custom properties.

If you modify the o-btn class, you will affect all buttons in your site.

Customize the buttons

/* All buttons will have square corners and a highlight size of 1rem */
.o-btn {
  --o_border-radius: 0px;
  --o_highlight-size-hover: var(--o-size-3);
}

Customized o-btn

You can also create your own modifier classes to add specific styles to a button.

Create a custom button

.o-btn-custom {
  --o_bg-light: black;
  --o_bg-dark: white;
  --o_text-light: silver;
  --o_text-dark: darkgrey;
  --o_border-radius: 1e5px;
  --o_highlight-size-hover: var(--o-size-3);
}

Use the custom button

<a href="#" class="o-btn o-btn-custom">o-btn-custom</a>

Custom modifier

Check the Buttons cheat sheet