How to Create an Accessible 3D CSS Button

A 3D CSS button uses a hard-edged shadow to look raised. When someone presses it, moving the control down and shortening the shadow creates a simple push effect. It can add a tactile accent to an otherwise flat web design, but the label and interaction states should remain clear without the effect.

Use a native <button> for an action on the current page and an <a> for navigation. Both can share the same visual class, but each keeps its built-in behavior. The HTML button element explains button types; setting type="button" avoids an unintended form submission when the button is inside a form.

Create the button

Start with semantic HTML. The button performs an action; the anchor below navigates to another page. Replace its destination with the page you want to open.

<button class="button-3d" type="button">Save changes</button>

<a class="button-3d" href="/css-button-effects-animations/">
  Explore more button styles
</a>

The base style creates a raised face and a solid lower edge. The active state moves the control down by 4 pixels and reduces the 6-pixel shadow to 2 pixels, keeping the total apparent depth consistent.

.button-3d {
  --button-face: #f39c12;
  --button-edge: #9a4f00;
  --button-border: #7a3e00;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--button-border);
  border-radius: 0.3125rem;
  background-color: var(--button-face);
  color: #1f2937;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 0 var(--button-edge);
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}

.button-3d:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

.button-3d:active:not(:disabled) {
  box-shadow: 0 2px 0 var(--button-edge);
  transform: translateY(4px);
}

button.button-3d:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .button-3d {
    transition: none;
  }

  .button-3d:active:not(:disabled) {
    transform: none;
  }
}

The :focus-visible rule keeps a visible outline for keyboard users. Choose an outline color that stands out against the surrounding page, and do not remove the browser's focus indicator without providing a clear replacement. The prefers-reduced-motion media feature lets the example remove the transition and pressing movement when a visitor has requested less motion.

The orange face and dark edge are only example colors. Adjust the custom properties to fit your design, then check that the text and focus outline remain easy to distinguish from their backgrounds. The original example used Flat UI colors.

Demo of the 3D CSS button

The original CodePen embed is retained below; the complete markup and CSS are also included above.

See the Pen 3D CSS Button by Kanishk Kunal on CodePen.

More button effects

For other approaches, see the collection of CSS button effects and animations, the CSS glow button effect, and the guide to simple ghost buttons.

For the CSS used here, see MDN's references for the box-shadow property, the focus-visible pseudo-class, and the prefers-reduced-motion media feature.