In today’s GUI Challenge, @Adam Argyle 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
#GUIchallenges #CSS #ChromeDeveloper
source