clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

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

Filed under: HTML/CSS— Tagged with: UI components, accessibility

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.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!