Sometimes you need the semantics and behavior of a button without the browser’s default button appearance. Here’s how to remove those styles while keeping the button accessible.

Button demo

This is still a real button, but it looks like the surrounding text:

Why use a button that looks like text?

Choose an element for what it does, not how it looks. A link navigates to a URL; a button performs an action on the current page. Native buttons also provide keyboard and assistive-technology behavior without extra JavaScript.

Text-like buttons can be useful for:

• The disclosure control in an accordion
• A button inside a sortable table’s th element
• Compact actions whose surrounding design makes their purpose clear

Make sure the control still looks interactive in context. Keep a visible focus indicator, and consider a hover style, an underline, an icon, or other visual cue when plain text would be ambiguous.

CSS button reset

.text-button {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: inherit;
}
 
.text-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Use type="button" unless the button should submit its form:

<button type="button" class="text-button">Activate me</button>

Avoid all: unset for this job. It also removes useful defaults, including the focus outline, which then have to be restored manually.

Tailwind CSS

Tailwind’s Preflight base styles are included automatically when you import Tailwind CSS. Preflight already removes default margin, padding, and borders, and makes buttons inherit typography and color while using a transparent background. In most Tailwind projects, a plain button is therefore already close to the reset shown above.

Add only the interaction styles your design needs:

<button
  type='button'
  className='appearance-none cursor-pointer underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2'
>
  Activate me
</button>

If you import Tailwind without its base layer, Preflight is not active; use the CSS reset above or add equivalent utilities.

CSS-in-JS version

The same reset as a style object:

export const TextButton = styled.button({
  appearance: 'none',
  background: 'none',
  border: 0,
  color: 'inherit',
  font: 'inherit',
  letterSpacing: 'inherit',
  padding: 0,
  textAlign: 'inherit',
 
  '&:focus-visible': {
    outline: '2px solid currentColor',
    outlineOffset: 2,
  },
})