A tale of two buttons | James Nash

You have buttons on your website. These can be on a light background, or a dark background, and have active and non-active states, but should be highly visible in any variation. You might think that means you need four CSS rules, but James does a great job of showing some tricks that mean you can achieve all of that with just one (plus a couple of custom properties). Simple tools, like inherit, are used to great effect. I mean I rarely use that attribute, yet James make it look like an indispensable superpower! 😅 Very clever indeed and a strong argument for why using the cascade to your advantage is often more beneficial than completely destructuring it with systems like BEM.

Remember, every time you set a property in CSS you are in fact overriding something (even if it’s just the default user agent styles). In other words, CSS code is mostly expressing exceptions to a default design. The more you do so, the more your UI components become sealed-off blocks of UI that don’t necessarily blend into or adapt to their surroundings.

Explore Other Notes

Older

Accessible interactions

So you have a non-page-based navigation: tabs, carousels, accordions, multi-level menus, route changes... we deal with these a lot in modern frontends. Is your "trigger" (the thing you press to make […]
  • You have buttons on your website. These can be on a light background, or a dark background, and have active and non-active states, but should be highly visible in any variation. You might think that […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.