clubmate.fi

Strip all styling from a button and make it look like text

Sometimes you want to use a button, but not to have it look like a button. This post looks into that: how to unstyle the default HTML button.

Button demo

Below is a demo button that looks like text, but actually is a button:

When would you want to use a button that doesn’t look like a button?

It has to do with semantics and accessibility. Of ten it might be tempting to use an <a> element, but anchor elements are meant to be used as links, e.g. when navigation is happening, you know. And it wouldn’t be the right element to use in a toggle, for example.

Cases where you would want to strip button from the default styles might include, but are not limited to:

• The clickable element in an accordion.
• The clickable table head element in a sortable data table.
• Just for design reasons one might not want to render a button.

The CSS to unstyle a button

Here’s the CSS:

.reset-button {
  background-color: transparent;
  border-width: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
}

It’s important to remember to inherit all the styles from the wrapping element.

CSS-in-JS version

And here’s a style object version of the reset, where I’ve expanded the the shorthands, because in some CSS-in-JS systems you can’t override a shorthand statement with a longhands (thinking of Fela specifically).

Here’s a styled-components component:

export const BlankButton = styled.button({
  backgroundColor: 'transparent',
  borderBottomWidth: 0,
  borderLeftWidth: 0,
  borderRightWidth: 0,
  borderTopWidth: 0,
  fontFamily: 'inherit'
  fontSize: 'inherit',
  fontStyle: 'inherit',
  fontWeight: 'inherit',
  lineHeight: 'inherit',
  paddingBottom: 0,
  paddingLeft: 0,
  paddingRight: 0,
  paddingTop: 0,
})

Conclusions

I remember, long time ago, when I figured this out, it felt really good to have this solution. This snippet is on every code-base I write.