Aller au contenu

Buttons - TL;DR:

Ce contenu n’est pas encore disponible dans votre langue.

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