Button States¶

Banner representing the Skeletonic Stylus Buttons

Overview¶

Text buttons can be placed in front of a variety of backgrounds. Until the button is interacted with, its container isn’t visible.

Text button states¶

Skeletonic CSS has multiple buttons states. The button classes can be used on an <a>, <button>, or <input> element.

Based on the action triggered, different types of buttons are available.

Active State¶

The active state denotes that a button or setting is interactive.

Disabled State¶

The disabled state communicates when a component or element isn’t interactive.

To disable a button, add the disabled attribute directly to the <button>, or set the disabled attribute on the <fieldset> containing the button. Disabled buttons cannot be interacted with and have no visual interaction effect.

Focused State¶

The focused state communicates when a user has highlighted an element using a keyboard or voice.

Hovered State¶

The hovered state communicates when a user has placed a cursor above an interactive element.

Pressed State¶

The pressed state communicates a user click, tap, or press.