buttons #

The <button> element is styled by default without adding classes. Classes like .selected and .plain and .color_a modify the base style.

Buttons have a .selected state that can be used for various UI purposes, like showing a selected item in a menu or a styling button's aria-pressed state. Instead of having two distinct styles of buttons with outlined and filled variants, fuz_css makes outlined buttons the default, and selected buttons are filled. There's also the .deselectable modifier class for buttons that remain clickable when selected. Themes can customize this behavior.

<button>a button</button>

Colorful buttons
#

<button class="color_a">
<button class="color_b">
<button class="color_c">
<button class="color_d">
<button class="color_e">
<button class="color_f">
<button class="color_g">
<button class="color_h">
<button class="color_i">
<button class="color_j">

With disabled attribute
#

<button disabled> :| </button>

With .selected
#

<button class="selected">...</button>

.selected buttons with .deselectable continue to be clickable when selected:

<button class="selected deselectable"> ... </button>

With .plain and .icon_button
#

<button class="plain"> + </button> <button class="icon_button"> + </button> <button class="plain icon_button"> + </button>

.selected variants

<button class="plain selected"> + </button> <button class="icon_button selected"> + </button> <button class="plain icon_button selected"> + </button>

.selected and .deselectable variants

<button class="plain selected deselectable"> + </button> <button class="icon_button selected deselectable"> + </button> <button class="plain icon_button selected deselectable"> + </button>

With .compact
#

The .compact composite class sizes things more tightly with smaller fonts, inputs, padding, border radii, and flow margins.

<button class="compact">compact</button>

.compact with .plain and .icon_button:

<button>+++</button> <button class="compact">+++</button> <button class="compact plain">+++</button> <button class="compact icon_button">+++</button> <button class="compact plain icon_button">+++</button>

.compact with colors:

<button class="compact color_h">color_h</button> <button class="compact color_g">color_g</button> <button class="compact color_d selected">color_d</button>

.compact overrides custom properties, so children inherit compactness:

<div class="compact row gap_sm"> <button>one</button> <button class="plain">to</button> <button class="color_a">3</button> </div>