Thinking on ways to solve BUTTONS

In today's GUI Challenge, @AdamArgyleInk styles all the web's different button types with custom properties and :where(), for light/dark adaptive buttons that are easy to make new variants with.

Chapters:

  • 0:00 - Introduction
  • 0:19 - Overview
  • 2:08 - Keyboard UX
  • 2:46 - New theme switcher
  • 3:09 - Mouse UX
  • 3:34 - Buttons in forms
  • 4:30 - Disabled button
  • 5:22 - HTML
  • 5:43 - CSS base selector
  • 6:24 - Adaptive custom properties
  • 7:20 - Button variants
  • 10:10 - Live button variant building
  • 11:18 - Recap
  • 11:50 - Reduced motion
  • 12:57 - Outro

Resources:

Watch more GUI Challenges → https://goo.gle/GUIchallenges

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

Back to all episodes