 Welcome to another episode of GUI challenges where I build interfaces my way and then I challenge you to do your way with our creative minds combined. We're going to find multiple ways to solve these interfaces and expand the diversity of our skills. And today's GUI challenge, we're building buttons. And we're not just going to build one button. We're going to style all of the different types of buttons on the web. The debugging corner. So of course we got to prove that these buttons look great across all screens and light and dark themes and all these devices. So here we have an iPad. We have Safari on desktop, Safari on iOS, Chrome on Android, Chrome on desktop and Firefox on desktop here in the bottom left, each helping us see that the different styles are coming in across these platforms and that we have appropriate layout. There was one item. I'm just going to point it out right at the beginning because it's kind of visually annoying to me and I just couldn't solve it, but see how there's no space here between the file that you upload and the button here on iOS or in Safari. I was able to push that away in all other scenarios, but not in there. And so that's a pretty small thing to not be able to get, but I was able to, I was able to get all the other features, so which is really nice. And so what I am showing here is nine button types. We have this unified, modern style visual differences, reinforce their purpose. Right. Okay. So here we are down here in Chrome. I have a default button that's just going to be the button tag. Nothing special. This is an input type button. This one is a button, same old button with an icon inside. This one is a button type submit. This one's a button type button. This is a button type reset. This is a disabled button. This is a custom one. So I've given it a custom class to show that you can extend these baseline buttons and build something like a big, nice, vibrant primary button. And then we match the button inside of the file input to look like the rest of the buttons, which I thought was a really nice touch. And so essentially what I'm trying to do is using the where selector, I'm going to build up a really strong foundation for just buttons in my application. And then with some custom styles and custom classes, create the variants and create some exceptions that I think end up looking really nice. One of the things I thought was especially interesting here, let's go over to Chrome canary for this where I can kind of demo things a little bit larger. I'm going to tab through my buttons. And you'll notice that the outline there kind of scaled up as it focused in scales up to kind of show that this element is now in focus. And it kind of gives it this like a promoted look. And if I hit space bar, I'm removing, I'm kind of going back down and shrink wrapping that outline against the element. It kind of gives it this focus effect, like a visual, like even the browser is like honing in on the button and says, oh, we know what you're pushing. You're pushing this one. And what's interesting too is that while that's the keyboard experience, the mouse experience is really, really similar. And here, let's just go to the light theme. Use our brand new switcher in the sidebar. I love this thing. So over here now in the styles pane, that's why I'm in canary because I get this handy dandy switcher. I just had to use it. It's so cool. I can switch quickly between my themes and see light and dark with just a little, little switch here. God, I love that. So nice. Okay. Anyway. So the mouse effect here, if you see, as I hover, it kind of scales up. And when I click, it scales back in very, very similar effect to what we get with the keyboard. So both button styles for being interacted with are the same for my keyboard users and for my mouse users. They get this expanded outline with when it's being pressed or being activated, it gets that little effect of being honed in on it. I thought that was really cool. So we've got our nine button types up top, but what, what about down here? Why do we have this bottom section? Well, this says when inside of a form untyped buttons visually match their new contextual default of type submit. So if you didn't know that a button, that's just a regular button inside of a form magically becomes a submit button unless you otherwise give it a type of button. So you can say button type button and it won't magically turn into a submit button, but with CSS, I'm able to find these so I can query the form and the button elements inside of there and say, is there an untyped button in here? If it's untyped, it needs to look like a submit button because that is its purpose. So that's what I mean by making their style reinforce their purpose. And you could see this is going to help prevent confusion for anybody using buttons inside of forms or buttons in your application that they're now going to look like what they do. I also thought it was nice having the reset button look a little bit destructive using some red colors and the submit button using the link color or just the accent color that's coming in here to get a promoted appearance that this is going to kind of take you somewhere. This is going to change things. And I thought those were interesting touches. Another thing that I thought was interesting too is my disabled button. Make sure that it's passing contrast ratios. So here I'll pop up in Visbug really quick. Go to the accessibility tool and just hover on this. And you can see that I'm passing the scores here. It's so often I'll see a disabled button that doesn't have proper contrast ratio because they're trying to subdue the button, right? So this is kind of a design challenge. You want to push a button backwards, flatten it. So notice how flat and squished this one looks here. I'll take out Visbug how flat and squished it looks. And I give it a cursor style so that it looks that way. Um, and I did that all while maintaining proper contrast. All the buttons, um, keep their proper contrast. And so that's one of, uh, two accessibility tips I have for buttons is make sure you have hover and focus styles. So the is a pseudo selector can help you with that. And also make sure you pass your contrast ratios. Okay. Let's look at a little bit of code. Cause I want to talk about some of the styles here. So let's pop over to the HTML and CSS. So here's the HTML just to kind of get a brief look at what we're dealing with. We have this article that's containing button and input type button. Here's our button with an icon. Right. Here's our icon inside of there. We have a button types of mid, a button type button reset, et cetera. So those are what we're targeting. Putting all of those in the page. Let me have a sort of test bed for my styles here. Okay. So let's look at our first selector, a lot of the power and flexibility of the buttons that I built today come down to two core concepts. One of them is using the where selector and the other one is using custom properties in a kind of new way. It's not a new way, but it's a way that I really appreciated today. And I'm excited to share it with you. But first we need to make sure that all the custom properties are available on all of the different buttons. And so that includes this file selector button. That's the button inside of the input type file. But I also want the input type file to have the custom properties. So this first selector says where, which is going to give all of these selectors zero specificity. So if anything wants to change these custom properties, there's going to be no battle. We start to build out our custom properties here. And I have an accent light and accent dark and an accent. And look at this pattern. It continues on down. So we have these static defined upfront custom properties for the two different states of light and dark. And then by default, we set the light theme to the base property here called accent light, dark, text, set to text light. And it continues on. And I build a lot of the custom properties this way. And it becomes really obvious why as we scroll down here to the prefers color scheme dark. So again, we're having the same selector, but inside of here. We just flip what all the values are. So BG becomes BG dark, et cetera. We have all the dark properties being assigned to the base props. So in one spot, we can go see where the dark theme is happening. And in one spot, we can go see all of the custom properties that are being defined and their variants. And it gives us this opportunity to read it well, but also override it well. So let's go look at making a custom. Oh, the custom one is going to be down here. So here's a custom button. This custom button just needs to tap into that BG prop. So in this case, it's not overriding BG light or dark. It's just overriding BG, which is giving them both one color set, same here with the border and the text colors. So this particular button is going to look the same in both light and dark. But if I wanted to change that, I would only need to change BG light, BG dark, et cetera. In fact, we can go look at one of those at the reset button. Let's find our reset button right here, red reset button. We set border light to a red highlight light to a red. So these are both in the light theme text light. Here's the red for the light theme and then text dark. Let's go test that out in Chrome Canary and see what that looks like. All right, I'm going to hit Command Shift C, select this reset button. And here are my reset styles for the light theme. All the themes are going to get these custom properties, but behind the scenes, they're either going to be set to the light or dark, depending on, you know, the media query. And we can see that in the light theme, here's my three light styles, text color, highlights. If I hover, we can see it's a light pink and the border color. Well, let's switch to dark and see that. Well, let's refocus our button here that the text dark is that light pink. But our borders are untouched and the hover highlight is untouched. This is really cool. This meant I got to style my variants in light or dark without media queries. So in one spot, here we'll go back to the code in one spot of my CSS and specify what happens in light and what happens in dark without even touching media queries. I thought that was really interesting. So the where pseudo selector or the where selector helps me do that with zero specificity, custom properties being defined this way and being flipped in their relevant selectors here. Allows me to kind of be done with that. It's like I said it and I forget it and then I just get to start using it and and you know, changing all my different styles. So here's like for the adaptive submit buttons. So the submit buttons and the forms with buttons that are not typed also get that accent color. So we'll come back to clump canary. Here's that button inside of a form untyped and it has that blue accent color. So all of our variants get made in this really easy way. And even you can start to combine them. Like let's look at this large button down here. This large button has two classes on it. One of them changes the colors and one of them changes the size. And the since the size property is setting the font size and the border radius and the padding are set with this character unit. They scale proportionately with the font size. And so you get these really nice looking buttons that go up and down to your heart's content. So I thought that was really interesting. I've got keyboard and focus styles that have this really unique sort of focus appearance that look really nice. I've got the where selector allows my buttons to create variants much easier. I have an API using custom properties where you just have to type lighter dark. Let's take that custom large button. And I want to take out the background color. And let's do dash dash underscore BG light. Well, let's keep the light button with that nice theme. I think that was a good one. BG light paste that and then I'll do BG dark. We'll paste that same set, but I'm going to desaturate and lighten the colors. So we've got our first color here. I'm going to lighten it. Kind of, yeah, let's go up a little bit. Let's keep that saturation and bump this one up a little bit too. And yeah, we can keep that saturation as well. Looks like that border color needs to change also now. So let's copy that, unselect that border, go border light paste underscore border dark will paste and we'll set this to a lighter tone here. So just a little, it's like kind of like the top color, but we put it all around the border. It gives a nice inset effect and let's toggle our light and dark theme. I look at that. Now I have an adaptive light and dark themed primary button just by interacting with the custom properties. Uh, and I think that's pretty cool. So that's it in a nutshell. The block posts that I made has all the additional details. We start with just the like regular HTML buttons. We build up all the custom properties section by section, and then we go apply all the selectors and the styles and I explained each little bit as we go. So if you want to follow along and build this, check out that blog post. But for now, I hope you liked my buttons. My buttons are, you know, like kind of simple, but they have a nice little 3d effect to them. They have good click and good keyboard accessibility. And of course they reduce motion. Let's go test out the reduced motion just to, just to see it. We'll also set the theme to light reduced motion reduce. And now we hover. We can see our instant growth of the size of the, and no scaling effect here on the keyboard focus, even if I activate, it's just instant. And the way that that was done is even interesting. Let's go back to the code because it follows the same pattern that we articulated before. So here we have transition motion reduce. There's no transitions, transitions. If motion is okay, well, here's what I want to do in that particular case by default, we're going to set the transition to whatever the reduced motion set is, which in this case is done. It could be a color, a border color, a background color, something like that. I didn't end up animating any of those personally, but you could. And so then here in our prefers reduce motion, no preference media query. We take the same selector, overwrite that transition property with the transition motion. Okay, property. Look, it reads like a book. I can go in one place and see how the logic works for setting the property, and I can go in one place and see the logic for creating the properties. Yeah, I'm going to continue using this pattern. I think it's really nice. And that's all this GUI challenge has for you today. I hope to see you in the blog post and I want to see what kind of buttons you have. Share those with me and I'll see you later, y'all. Thanks for watching this GUI challenge.