Buttons - TL;DR:
The base class: o-btn
link The base class: o-btno-btn
To style an element as a button, use the o-btn
o-btn
<a href="#" class="o-btn">o-btn</a>
o-btn
Button modifiers
link Button modifiersTo add specific styles to a button, add a modifier class to the o-btn
Example: Brand Gradient Button
link Example: Brand Gradient Buttono-btn-brand-gr
<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 Buttono-btn-outline
<a href="#" class="o-btn o-btn-outline">o-btn-outline</a>
o-btn + o-btn-outline
Combine modifiers
link Combine modifiersYou can combine multiple modifiers to create a button with multiple styles.
<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 CustomizationTo customize the buttons, use the buttons CSS custom properties.
If you modify the o-btn
/* 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.
.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);}
<a href="#" class="o-btn o-btn-custom">o-btn-custom</a>
Custom modifier