Button State Designer

Style each interaction state, then hover / click / Tab the live button to feel it. Copy production-ready CSS with pseudo-class rules.

Presets

Editing state

This state's style

Background

Text color

Border color

Corner radius

Padding X

Padding Y

Outline width

Outline color

Opacity

Transition

Duration

Easing

Base type & border

Font size

Font weight

Border width

Label

Hover · press · Tab-to-focus the button to feel every transition

Preview :disabled

Generated CSS