# Remove a button’s default styles and make it look like text

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:

Activate me

## 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](/sortable-table)
- 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

```css
.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:

```html
<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](https://tailwindcss.com/docs/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:

```jsx
<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:

```js
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,
  },
})
```