Ghost Button CSS: A Simple Accessible Example

A ghost button uses a transparent or light background, a visible border, and a text color that becomes more prominent when the user hovers over or focuses it. This pattern works well for secondary actions, but it still needs to be a real link or button with a usable keyboard focus state.

This example uses CSS only. Use an <a> element when the control navigates to another URL, and use a <button> when it performs an action on the current page. The MDN guide to the anchor element and MDN guide to buttons explain the behavior you get from each native element.

HTML for a ghost button

The examples below show both common uses. Replace the fragment in the link with the page or section you want to open.

<a class="ghost-button" href="#contact">Contact us</a>

<button class="ghost-button" type="button">Save draft</button>

Do not turn a link into a button just for its appearance. Keeping the native element makes keyboard interaction, browser behavior, and assistive-technology announcements more predictable.

Ghost button CSS

The ghost-button class keeps the original lightweight approach but adds a visible :focus-visible state, a minimum block size, logical spacing properties, and a transition that can be disabled for people who request reduced motion.

.ghost-button {
  align-items: center;
  background-color: #fff;
  border: 2px solid currentColor;
  border-radius: 0.375rem;
  color: #00695c;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  justify-content: center;
  line-height: 1.2;
  min-block-size: 2.75rem;
  padding-block: 0.5rem;
  padding-inline: 0.875rem;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.ghost-button:hover {
  background-color: #00695c;
  color: #fff;
}

.ghost-button:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.ghost-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .ghost-button {
    transition-duration: 0.01ms;
  }
}

@media (forced-colors: active) {
  .ghost-button {
    background-color: ButtonFace;
    border-color: ButtonText;
    color: ButtonText;
  }

  .ghost-button:hover {
    background-color: Highlight;
    color: HighlightText;
  }
}

The dark teal and white color pairing provides a strong text contrast on the light and filled states. Check the complete component, including its border and focus indicator, against WCAG's contrast guidance when you adapt the colors to your own brand.

The :focus-visible rule adds an indicator when keyboard users need one without forcing the same outline on every pointer interaction. See MDN's :focus-visible reference for the selector's behavior. The prefers-reduced-motion rule follows the user's operating-system preference instead of making the transition a requirement for understanding the state change; MDN documents the media feature.

The forced-colors override lets the browser choose system colors in high-contrast modes. Do not replace those system colors with hard-coded brand colors; MDN's forced-colors documentation covers the media feature and its system color keywords.

Live demo

You can see the result in the CodePen demo below, including the corresponding HTML and CSS:

See the Pen Ghost Button CSS #1 by Kanishk Kunal on CodePen.

If the embed does not appear in your feed reader, use the HTML and CSS examples in this article.

Common adjustments

• Use a darker text and border color if your brand color does not provide enough contrast against the page background.
• Keep the focus indicator visible. A hover-only style does not help someone navigating with a keyboard.
• Apply disabled only to an actual <button>. A link has no native disabled state; remove or avoid its destination when it should not be available.
• If the button needs a pressed or expanded state, keep the native element and expose that state with the appropriate ARIA attribute rather than relying on color alone.

For another variation, see our ghost buttons on a background image. You can also use our developer's guide to testing website accessibility as a broader checklist for reviewing the finished component.