CSS Styling Buttons

CSS Styling Buttons

CSS can transform the appearance of HTML buttons with colors, borders, spacing, typography, shadows, and interactive states.

Buttons are interactive controls used to perform actions such as submitting a form, opening a menu, or changing content on a page. CSS can customize their presentation while preserving the behavior and accessibility provided by the HTML <button> element.

Basic Button Styling

The <button> element can be styled with many of the same CSS properties used for other elements.

button {
  padding: 10px 18px;
  border: 1px solid #0088cc;
  color: white;
  background-color: #0088cc;
  font: inherit;
}

The padding increases the clickable area around the button text, while the foreground color, background color, and border define its basic appearance.

Using font: inherit allows the button to use the font settings inherited from its surrounding content.

Button Colors

The color property controls the button's text color, while background-color controls its background.

.primary-button {
  color: white;
  background-color: #0088cc;
}

Foreground and background colors should have sufficient contrast so the button label remains easy to read.

Different colors can help distinguish button types, but color alone should not be used when users need to understand an important difference in meaning or function.

Button Borders

The border property controls the width, style, and color of a button's border.

button {
  border: 2px solid #0088cc;
}

The border-radius property can round the button's corners.

button {
  border-radius: 6px;
}

A value of 0 creates square corners, while larger values create increasingly rounded corners.

Button Padding and Sizing

Padding controls the space between the button label and its border.

button {
  padding: 10px 18px;
}

The first value controls the top and bottom padding, while the second controls the left and right padding.

The width property can be used when a design requires buttons of a particular width.

.wide-button {
  width: 100%;
}

A button does not normally need an explicit width. Allowing its width to be determined by its content and padding often works well for ordinary controls.

Button Hover State

The :hover pseudo-class can change a button's appearance while a pointing device is positioned over it.

button:hover {
  background-color: #006699;
  border-color: #006699;
}

A hover effect provides useful feedback for pointer users, but important information or functionality should not depend on hover alone.

Button Focus State

Buttons can receive keyboard focus, so their focus state should remain clearly visible.

button:focus-visible {
  outline: 3px solid #005580;
  outline-offset: 3px;
}

The :focus-visible pseudo-class allows the browser to show the custom focus indicator when a visible focus treatment is appropriate, such as during keyboard navigation.

Avoid removing the browser's focus outline unless another clearly visible focus indicator is provided.

Button Active State

The :active pseudo-class applies while a button is being activated.

button:active {
  background-color: #004d73;
}

The active state is temporary and can provide immediate visual feedback when the user presses the button.

A small visual movement can also reinforce the pressed appearance.

button:active {
  transform: translateY(1px);
}

Disabled Buttons

A button with the HTML disabled attribute can be styled with the :disabled pseudo-class.

button:disabled {
  color: #666;
  background-color: #ddd;
  border-color: #bbb;
  cursor: not-allowed;
}

A disabled button is unavailable for normal interaction. Its appearance should communicate that state while keeping its label readable.

CSS only changes the presentation. The HTML disabled attribute is what gives a native button its disabled behavior.

Button Shadows

The box-shadow property can add depth or separation around a button.

button {
  box-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}

The values specify the horizontal offset, vertical offset, blur radius, and shadow color.

Shadows are a visual effect and do not change the amount of layout space occupied by the button.

Button Transitions

The transition property can make changes between button states occur gradually instead of instantly.

button {
  transition: background-color 0.2s ease,
              border-color 0.2s ease;
}

When the button's background or border color changes during hover or another state, the browser transitions between the values over 0.2 seconds.

Transitions should generally be brief and should support the interaction rather than delay it.

Button Accessibility

CSS should enhance a button without removing the visual and interaction cues users need. Button text should remain readable, focus should remain visible, and interactive states should be easy to distinguish.

Use the HTML <button> element for actions such as submitting a form, opening an interface control, or changing content on the current page. Use an <a> element when the purpose is navigation to another page, document, or location.

A button's clickable area should also be large enough to use comfortably. Padding can increase the interactive area without requiring a larger text size.

Visual effects such as hover colors, shadows, and movement should supplement the button's label and HTML meaning rather than replace them.

Styling Buttons Example

The following example compares a primary button, an outline button, and a disabled button. Open the example in the editor and change the colors, borders, padding, corner radius, shadow, or interactive states to see how each property affects the buttons.

.primary-button {
  color: white;
  background-color: #0088cc;
  border: 2px solid #0088cc;
}
.outline-button {
  color: #0088cc;
  background-color: white;
  border: 2px solid #0088cc;
}
button:hover:not(:disabled) {
  color: white;
  background-color: #006699;
  border-color: #006699;
}