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:
- Read along → https://goo.gle/3wEsaWR
- Try a demo → https://goo.gle/3a2guoV
- Get the source →https://goo.gle/39uY8Na
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs