CSS Button Design Basics: Padding, Radius, Color, Hover, Shadow, A11y

On a web page, the element users click and tap most often is the button. No matter how attractive it looks, if it is hard to press, users leave; and no matter how good the function is, a button where users "can't tell where to press" goes unused. Designing buttons with CSS is not mere decoration but a way to visually signal "press here to move forward." This article explains the basics of CSS button design in order: appearance, state, tap-friendliness, and accessibility.

CSS Button Basics: Padding, Radius, Background

The foundation of a button is three things: padding, border-radius, and background and text color. With no styling, the HTML <button> element looks plain and browser-default, but adjusting these three alone instantly makes it look "pressable."

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background-color: #2563eb;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

padding is the space between the text and the button's edge. Giving it more on the left and right, like "12px top/bottom and 24px left/right," creates a wide, easy-to-press balance. Too little feels cramped and hard to press; too much looks stretched. A good rule of thumb is 0.7-1x the text size top and bottom, and about double that on the sides.

border-radius is the corner rounding. Zero looks sharp and hard; around 8px looks friendly and modern; setting half the element's height (or 9999px) makes a "pill" shape with fully rounded ends. Don't forget cursor: pointer so the cursor becomes a hand on hover, signaling that it is pressable. When you want to quickly try color and size combinations, the Button Generator lets you change values and check the preview efficiently.

Hover and Active: Communicating State

A good button "reacts" to user actions. When the look changes in response to hovering or pressing, it reassures the user that "something is responding here." The pseudo-classes :hover and :active handle this.

.btn:hover {
  background-color: #1d4ed8;
}
.btn:active {
  background-color: #1e40af;
  transform: translateY(1px);
}

:hover is the state when the cursor is over the button. Darkening (or brightening) the background a bit is the classic approach, intuitively conveying that it is responding. :active is the moment it is being pressed; darkening the color further or sinking it slightly with transform: translateY(1px) recreates the feel of pressing a physical button.

To make state changes smooth rather than abrupt, use transition. Specifying transition: background-color 0.2s, transform 0.1s; interpolates color and position changes smoothly over a short time, giving a refined impression. Note that on touch devices such as smartphones, :hover barely works, so it is important not to rely on :hover alone for important information.

Adding Depth with Shadows and Gradients

When you want to give a flat button depth and presence, box-shadow and gradients help. A shadow lifts the button slightly off the background, strengthening the impression of a "touchable object."

.btn {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

A shadow is specified by "horizontal offset, vertical offset, blur, and color." Shifting it slightly downward, applying blur, and using a semi-transparent black is the basis of a natural shadow. Enlarging the shadow on hover creates the effect of the button lifting toward you, making the response clearer. Because small changes to shadow values greatly affect the result, deciding the numbers while previewing in the Box Shadow Generator reduces mistakes.

For a gradient, slightly changing color from top to bottom, like background: linear-gradient(180deg, #3b82f6, #2563eb);, gives a more three-dimensional, elegant texture than a flat single color. However, both shadows and gradients look dated and heavy if overdone. Recent trends favor flat, restrained decoration, so a modern balance keeps shadows light and gradients very subtle. Check shadows alone in the Box Shadow Generator, and the overall result including color and gradient in the Button Generator.

Tap-Friendliness: Size and Contrast

Just as important as visual beauty is tap-friendliness (usability). On smartphones especially, a size easy to tap with a finger is essential. As a general guideline, a tap target should be at least about 44x44 pixels; buttons that are too small cause mistaps and frustration.

• Enough height: use padding or height to secure a finger-friendly height (roughly 44px or more).
• Adequate spacing: when placing several buttons in a row, neighbors that are too close invite mistaps, so add space with margin or gap.
• Contrast with text: if the brightness difference (contrast ratio) between background and text is small, the text becomes hard to read.

Contrast is tied directly to readability, not just taste. For white text, choose a sufficiently dark background; for black text, a sufficiently light background, and avoid light text on a light background. When you want to apply color combinations and check whether they are readable, switching text and background colors in the Button Generator while previewing makes it easy to judge.

Accessibility: Focus and Readability

Modern button design must consider not only mouse and touch but also users who operate by keyboard only and those using assistive technology. Among these, the display of :focus is especially important.

As you press the Tab key on a keyboard, "focus" moves to the operable button. If it is not visually clear which button is selected, keyboard users lose track of where they are. The browser-default focus ring (outline) should not be carelessly removed with outline: none. If you do remove it, always provide a clear replacement.

.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

Using :focus-visible shows the focus ring only during keyboard operation, keeping it out of the way on mouse clicks. Together with making button content text rather than a decorative image, and supplementing icon-only buttons with aria-label for meaning, these touches make buttons clear for everyone. Securing sufficient color contrast is also fundamental to readability, including for low-vision users.

Crafting Common Button Styles

Real sites use several buttons with different roles. The representative ones are the primary button for the action you most want pressed, the secondary button for supporting actions, and the outline button with only a border.

An outline button is made by combining background: transparent; with border: 2px solid #2563eb; and a matching text color. The key is to limit "the button you most want pressed" to one per screen. If every button stands out equally, users hesitate over which to choose. Making the primary prominent and the secondary and outline restrained guides the eye naturally to the main action.

For a disabled button, lower the opacity and set cursor: not-allowed; to convey "it can't be pressed now." To quickly get a sense of these styles, create each pattern in the Button Generator and export the CSS, and fine-tune shadows in the Box Shadow Generator to lock in the final look before writing code.

CSS button design is completed by layering visual basics like padding, radius, and color with state expressions such as hover and focus, plus attention to tap-friendliness and accessibility. Start with one simple button, then add states and shadows little by little while checking the balance between looks and usability.

Please note that this article is intended to provide general information. Browser support and accessibility standards change, so make your decisions after checking the latest official documentation and guidelines when implementing.