CSS Button Styling and Hover Effects

A well-designed button communicates an action through shape, color, readable text and unmistakable focus styling.

Use the semantic <button> element and style its background-color, border, padding and border-radius. Provide distinct :hover and :focus-visible states without changing its accessible name.

For forms, choose type="button" for demonstrations that should not submit data. In real interfaces, use type="submit" for true submission actions.

A shared button class defines the base appearance; interaction pseudo-classes add feedback without requiring extra markup.

Use padding and contrast for a clear action.

HTML

<button type="button" class="action">Save changes</button>

CSS

.action { background: #1d4ed8; color: white; border: 0; border-radius: 8px; padding: 12px 18px; font: 600 15px/1.2 Arial, sans-serif; cursor: pointer; }

Rendered output

Observe: The button has a large click target, visible label and rounded corners.

Use complementary states without relying on color alone.

HTML

<div class="actions"><button type="button" class="action">Save changes</button><button type="button" class="action secondary">Cancel</button></div>

CSS

.actions { display: flex; gap: 10px; flex-wrap: wrap; } .action { background: #0f766e; color: #fff; border: 2px solid #0f766e; border-radius: 9px; padding: 11px 17px; cursor: pointer; transition: background-color 170ms ease; } .action.secondary { background: transparent; color: #115e59; } .action:hover { background: #115e59; color: #fff; } .action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .action { transition: none; } }

Rendered output

Observe: The outlined secondary button remains distinct; hover and focus both provide feedback.

A shared button class defines the base appearance; interaction pseudo-classes add feedback without requiring extra markup.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A link should remain an <a> when it navigates; a button represents an action.

• A hover-only state excludes keyboard and touch input.

Create a disabled-state design and verify it remains legible; do not fake disabled behavior using color alone.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Design states and semantics together, with a visible keyboard focus.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.