6 ms·
The markup for the callout buttons/links on the example page [0] is just <a href="#"><em>Button text</em></a> (for outlined) and <a href="#"><strong>Button text
by jake-low 6y ago
The markup for the callout buttons/links on the example page [0] is just <a href="#"><em>Button text</em></a> (for outlined) and <a href="#"><strong>Button text</strong></a> (for filled). That's a pretty creative solution that I definitely haven't seen before.
Giving opinionated styles to unclassed HTML elements is definitely not the right fit for every website. But, given this project's goal of being a minimalist, quick-start stylesheet that requires no classes, I think this use of `a em` and `a strong` selectors to create button-y links is pretty ingenious.
[0]: https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/
- deleted 6y ago[deleted]
- oxalorg 6y agoThat is indeed truly creative. Props to the author. I wanted to solve a similar problem when creating sakura.css [0], but I decided to not implement it and keep it even simpler. [0]: https://github.com/oxalorg/sakura https://github.com/oxalorg/sakura
- mrec 6y agoI think it undermines the semanticity of the markup though. A hyperlink isn't supposed to render as a button, or vice versa. If this was just a bolded word in normal inline link text, the button presentation would be very unwelcome.
- bigmanwalter 6y agoSemantics has less to do with style and more to do with the fact that an element can be clicked in order to navigate somewhere else.