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>