Buttons are among the most critical interactive elements in user interface design, and their effectiveness is rooted in the concept of affordances, a term introduced by psychologist James J. Gibson and applied to design by Don Norman. An affordance is a visual cue that suggests how an object can be used. A well-designed button affords clicking through visual properties like raised appearance (shadows suggesting depth), distinct coloring that contrasts with surrounding elements, and a shape that looks pressable. The visual design of buttons directly impacts usability because users must be able to instantly distinguish interactive elements from static content.

Button UX design encompasses multiple interactive states, each requiring distinct visual treatment. The default state establishes the button's baseline appearance. The hover state, triggered when a cursor moves over the button, provides feedback confirming the element is interactive, typically through subtle color shifts, shadow changes, or scale transforms. The active or pressed state, triggered during a click, should provide immediate tactile feedback by reversing the elevation (reducing shadow, shifting downward) to simulate a physical button press. The focus state, activated by keyboard navigation (Tab key), must be visually distinct for accessibility, typically displayed as an outline ring. The disabled state communicates non-interactivity through reduced opacity and a "not-allowed" cursor.

From a CSS implementation perspective, button states map to pseudo-classes: :hover, :active, :focus, and :focus-visible. The :focus-visible pseudo-class is particularly important for modern button design because it applies focus styles only when the user is navigating with a keyboard, avoiding the common complaint of focus rings appearing after mouse clicks. CSS transitions smooth state changes, with typical transition durations of 150-250 milliseconds for color and shadow changes, fast enough to feel responsive but slow enough to be perceived as smooth rather than instantaneous. Transform properties like scale(1.05) on hover and translateY(2px) on active create subtle movement that reinforces the interactive nature of the element.

Accessibility considerations are inseparable from button design. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 between button text and background color, and 3:1 between the button boundary and adjacent colors. Touch targets should be at least 44x44 CSS pixels per WCAG 2.5.5, ensuring buttons are easily tappable on mobile devices. Semantic HTML using the native button element provides built-in keyboard accessibility (Space and Enter trigger clicks), ARIA role semantics, and form submission behavior that cannot be replicated by styling a div or span to look like a button.