Styling Buttons | CSS Styling Tutorial

CSS Styling Buttons

CSS can transform the default appearance of HTML buttons by controlling their colors, backgrounds, borders, spacing, size, and interaction states. Consistent button styling can make actions easier to recognize while preserving the behavior and meaning provided by the HTML button element.

Basic Button Styling

The HTML <button> element has a browser-defined appearance that can be customized with CSS. Common properties include color, background-color, border, padding, and font.

button {
  padding: 10px 18px;
  color: #ffffff;
  background-color: #0088cc;
  border: 2px solid #0088cc;
  font: inherit;
  cursor: pointer;
}

Browser Result

Button Colors

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

button {
  color: #ffffff;
  background-color: #0088cc;
}

The text and background colors should provide enough contrast to keep the button label easy to read.

Button Padding

Padding adds space between the button label and its edges, making the control larger and easier to recognize and interact with.

button {
  padding: 10px 18px;
}

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

Button Borders

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

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

A border can match the background color for a solid button or contrast with the background to create an outlined button style.

.outline-button {
  color: #0088cc;
  background-color: #ffffff;
  border: 2px solid #0088cc;
}

Rounded Corners

The border-radius property controls the roundness of a button's corners.

button {
  border-radius: 5px;
}

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

Hover State

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

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

Hover styles provide useful visual feedback, but important information should not depend on hover because touchscreens and other input methods may not provide the same interaction.

Focus State

The :focus pseudo-class can provide a visible indication when a button receives keyboard focus.

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

A clearly visible focus indicator is important for keyboard navigation. Avoid removing the browser's default outline unless another visible focus style replaces it.

Active State

The :active pseudo-class applies while a button is being activated, such as while a mouse button is pressed.

button:active {
  background-color: #004466;
  border-color: #004466;
}

The active state is usually brief but can provide immediate visual feedback that the control is being activated.

Disabled Buttons

A button with the HTML disabled attribute cannot normally be activated. The :disabled pseudo-class can give disabled buttons a different appearance.

button:disabled {
  color: #777777;
  background-color: #eeeeee;
  border-color: #cccccc;
  cursor: not-allowed;
}

Browser Result

CSS only changes the visual appearance. The HTML disabled attribute determines whether the button is actually disabled.

Button Size

Button size can be controlled with padding, font size, width, and other sizing properties. Allowing the button width to follow its label often works well for ordinary buttons.

.large-button {
  padding: 14px 24px;
  font-size: 18px;
}

A button can also fill the available width of its container when the design calls for a full-width control.

.full-button {
  width: 100%;
}

Links and Buttons

Links and buttons can be styled to look similar, but their HTML elements should still match their purpose. Use an <a> element when the visitor is navigating to another location and a <button> element when an action is performed.

<a href="/contact.html" class="button-link">Contact Us</a>

<button type="submit">Submit Form</button>

CSS controls presentation, but it should not be used to replace the semantic meaning and expected behavior of the appropriate HTML element.

Try Styling Buttons

Edit the CSS in the example to change the button colors, padding, border, rounded corners, and interaction states. Use the Tab key to give the button focus, point to it to see the hover style, and activate it to see the active state.

Play in Editor

Summary

CSS can customize buttons with colors, backgrounds, borders, padding, rounded corners, and sizing. The :hover, :focus, :active, and :disabled pseudo-classes provide visual feedback for different button states. Button styling should preserve a clear focus indicator and should not replace the semantic purpose of the HTML element.

The next tutorial covers Styling Navigation and explains how CSS can transform semantic navigation lists and links into common website navigation layouts.