UCSSR
CSS Reference

CSS Button Styles

Complete guide to styling CSS buttons — backgrounds, borders, hover effects, transitions, focus states, and accessibility.

Overview

Buttons are the primary interactive elements in web interfaces. CSS button styling involves `background-color`, `color`, `border`, `border-radius`, `padding`, `font`, `box-shadow`, and pseudo-classes like `:hover`, `:focus-visible`, and `:active`. Well-styled buttons communicate clickability, provide feedback on interaction, and maintain accessibility for keyboard and screen reader users.

Syntax

button { background: ...; color: ...; border: ...; padding: ...; ... }

Values

background-color
Primary visual — use solid colors, gradients, or transparent for ghost buttons.
border
Outline style. `border: 2px solid currentColor` for outline buttons, `border: none` for filled.
padding
Internal spacing. Typical: `padding: 0.5em 1.5em`. Use `em` to scale with font size.
:hover
Hover state — change background, add shadow, or scale slightly (`transform: scale(1.02)`).
:focus-visible
Keyboard focus indicator. Always style this for accessibility. Use `outline` or `box-shadow`.
:active
Pressed state — slight scale-down (`transform: scale(0.98)`) or inset shadow.
transition
`transition: all 0.2s ease`. Smooths state changes between default, hover, and active.

Browser Support

All properties universally supported. `:focus-visible` requires Chrome 86+, Firefox 85+, Safari 15.4+.

Try it visually

Use our visual button CSS generator to create and preview CSS code in real-time.

Open CSS Button Styles Tool

Frequently Asked Questions

Use `appearance: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer;` then apply your custom styles.

Ensure 4.5:1 color contrast, provide `:focus-visible` styles, use semantic `<button>` elements, and maintain minimum 44x44px touch targets.

Use `background-image: linear-gradient(...)` with `background-size: 200%`. On hover, shift `background-position` to reveal the gradient's second half.