States

.hover, .active, .focus and .disabled show a state without touching the element.

Use them for demos, style guides and design reviews. They work on buttons, links, inputs, selects, textareas and select buttons, and look the same as the real state. Form fields have no hover look, so .hover leaves them alone.

Buttons

Normal · Hover · Focus · Disabled

Form controls

Real states

.disabled only changes the look and blocks the pointer. For a control that is really off, use the disabled attribute, or aria-disabled="true" on a link. The current page or item takes aria-current, which shows the hover look. See ARIA attributes.

Variables

Disabled elements fade to --i-control-disabled-opacity, listed with the other control variables.