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. I think the solution offered to use a <span role="button" tabindex="0" onClick="..."> is a little bizarre since you need bring your own keyboard handling with is non-trivial and requires JavaScript. But there are 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.

Direct Link to Article — Permalink

The post Unbuttoning Buttons appeared first on CSS-Tricks.