Thinking on ways to solve ​​SPLIT BUTTONS

Thinking on ways to solve ​​SPLIT BUTTONS

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=Qcpru-fIgwk


Duration: 21:55
23,349 views
792

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

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2021-10-29Customize media notifications and playback controls outside the browser
2021-10-21Identify potential CSS improvements with the CSS Overview panel #DevToolsTips
2021-10-19New in Chrome 95: URLPattern, the Eye Dropper API, new origin trials, and more!
2021-10-19Are SPAs better than MPAs? | HTTP 203
2021-10-14Chrome 95 - What’s New in DevTools
2021-10-13Thinking on ways to solve ​​MULTI-SELECT
2021-09-28Avoiding layout shift by putting the CSS in charge - HTTP 203
2021-09-21New in Chrome 94: Color management for canvas, WebCodecs, WebGPU, and more!
2021-09-16Chrome 94 - What’s New in DevTools
2021-09-14Color Spaces: Do YOU know the difference between sRGB, LAB and CIE XYZ? - HTTP 203
2021-09-08Thinking on ways to solve ​​SPLIT BUTTONS
2021-09-08FLEDGE | What is the Privacy Sandbox?
2021-08-31New in Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more!
2021-08-31Random paint effects - HTTP 203
2021-08-26Chrome 93 - What’s New in DevTools
2021-08-25Attribution reporting | What is the Privacy Sandbox?
2021-08-17Deno - HTTP 203
2021-08-11First-party sets | What is the Privacy Sandbox?
2021-08-11Thinking on ways to solve SWITCHES
2021-08-05Core Web Vitals best practices (Italian with English subtitles)
2021-08-04web.dev Internationalization (Polish with English subtitles)


Tags:
purpose: Educate
pr_pr: Chrome
series: GUI Challenges
type: Screencast (0-10min)
GDS: Yes
ways to solve split buttons
split buttons
what are split buttons
how to solve split buttons
gui challenges
css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
Adam Argyle