In today's GUI challenge I share my thinking on a way to solve split buttons. A staple component for condensed interfaces, it allows a single button to feature secondary actions. Lots of great tips about theming, shadows, color, layouts, interaction UX, and more.
Chapters:
- 0:00 - Introduction
- 0:24 - Overview
- 1:40 - Light & Dark
- 3:37 - Shadows
- 5:45 - SVG Tips
- 7:12 - States
- 10:20 - Keyboard UX
- 11:41 - Reduced Motion UX
- 13:20 - Screen Reader UX
- 14:13 - Right-to-left UX
- 15:58 - Flexbox Layouts
- 18:51 - JavaScript
- 21:22 - Outro
Resources:
- Read along → https://goo.gle/3BNn23o
- Try a demo → https://goo.gle/3l92efU
- Get the source → https://goo.gle/3n4Sfcg
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf