Unbuttoning Buttons

We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you're looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your own styles. Hardly a big deal if you ask me, especially since it's extremely likely you'll be styling buttons anyway.

Scott O'Hara has taken a look as well including a couple of interesting other CSS explorations, neither of which stacked up for different reasons:

  • display: contents; - some semantics-based accessibility problems.
  • all: unset; - doesn't reset display value, not good enough browser support.

It took me a little bit to wrap my head around this, including having a little chat with Scott over DMs. I was so confused that the correct way to do what he was laying out was <span role="button" tabindex="0" onClick="...">. What?! I thought. It's almost never the correct thing to do to force a non-button element to behave like a button and have to replicate all the button functionality in other ways. And indeed, if you just have like a word-or-two kinda button, you probably don't need to, and can just un-do button styles. The trouble comes in here: you cannot un-do inline-block on a <button>. Apparently, it's just impossible. You can set it to display: inline; and it will take it, but it won't behave like it.


Another don't call it a reset from Sindre Sorhus. It's a port of Normalize that, as the name suggests, is modernized to remove some of the older stuff and add a few opinionated bits. I'm good with light sensible opinions, like in this case, box-sizing: border-box; everywhere. This looks similar to sanitize.css which is also based on Normalize and brings a few more sensible opinions. Same with Reboot.

If you're interested in some of the history and thinking behind these things, I wrote about that not long ago. Daniel Box made a little tool to compare them and I forked it to include modern-normalize.

Normalize (CSS) No More.

Shaun Rashid:

... as I work with building responsive websites where the widening array of devices has changed the way that we design websites, I have fallen back to the age-old statement that answers the question of whether a website needs to look exactly the same in every browser. With the answer to that question, I have found that the reset/normalize stylesheet has become unnecessary.

I wonder how popular not using any sort of reset is already? As you look down the list of things that something like sanitize.css fixes, much of it is for browsers that I'd imagine a lot of people don't worry too much about anymore, what with the evergreen-ness of most desktop browsers these days. Then remove the opinionated stuff and the stuff with only minor cross-browser differences and there isn't much left.

I couldn't live without this though:

* {
  box-sizing: border-box;