Thinking on ways to solve BUTTONS

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


Duration: 13:20
40,563 views
1,321

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

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2022-06-29Thinking on ways to solve FABs
2022-06-28FLIP animations | HTTP 203
2022-06-22Gradient shadow #Shorts
2022-06-21New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!
2022-06-16Chrome 103 - What’s New in DevTools
2022-06-08New in Chrome 102: PWAs as File Handlers, inert, the navigation API, and more!
2022-06-07The history API is dead. Long live the navigation API | HTTP 203
2022-05-30Chrome 102 - What’s New in DevTools
2022-05-25Huellipsis #Shorts
2022-05-24Samsung Internet - the why & how | HTTP 203
2022-05-18Thinking on ways to solve BUTTONS
2022-05-12Bringing Adobe's Creative Cloud to the web: Starting with Photoshop
2022-05-12Top 10 web things to know from Google I/O
2022-05-12The state of responsiveness on the web
2022-05-12State of CSS
2022-05-12DevTools: State of the Union 2022
2022-05-12A deep dive into optimizing LCP
2022-05-12Learn how browsers are working together to make it easier to build for the web
2022-05-12Open web standards with Privacy Sandbox
2022-05-12Best practices for developing classroom tools with Chrome OS
2022-05-12Gaming with Chrome OS


Tags:
Chrome
Developers
Google
Web
gui challenges
css
css tutorial
how to use css
what is css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
Adam Argyle