3.2 Styling Buttons
In this lesson we’ll style the buttons from our form kit. This is a pretty easy job, so let’s get started.
1.Introduction1 lesson, 01:47
2.The Basics of Styling HTML Forms5 lessons, 32:32
3.Advanced Techniques for Styling HTML Forms5 lessons, 48:32
3.2 Styling Buttons
Welcome back to the course. In this lesson, we're going to style the buttons from our form kits. This is a pretty easy task. So let's get started. Let's take a quick look and Figma at our buttons, right? So we have a simple rounded button here with a gradient as a background. The text inside is bold. We have a little bit of padding on this button as well, 24 all around. And we have two extra states here on hover. We're basically changing the gradient. And on pressed, we're doing the same thing only to some shades. So back here in code pen, you can say that we have three buttons. And in terms of HTML, the first one is an input type button, the second input type submit, and the third is a run of the mill button. So let's start here by targeting these elements. And we'll start by removing the borders. So borders zero. And now, let's add that background. And fortunately, Figma gives us a very simple way of doing that. You simply copy and paste and that's it. Now if you want because we're using CSS, we can go ahead and search. Or replace these hex values with the corresponding variables here for purple. So for example, the one that I selected is purple-100. So you could go in and replace that here, purple-100. And this one, 7BD, is purple-110. So you can replace that with purple-110 and the result is gonna be exactly the same. And actually I think this is the the better version. Next, what else? We have a border radius of five pixels, padding is 24 pixels. Let's change the color. We'll make these white. Let's make the text bold, so font weight bold, and what else? Let's change the cursor to pointer. So they behave like real buttons. Okay, now we now have the little Mickey Mouse hand when we hover over them. What else? Let's change their background on hover and active, right? And you'll see that this is where one of the problems comes in. So on hover, basically we need to do this right we copy the backgrounds, we paste that in. And when we go here, hey, that's great. It changes no problem. And let's do the pressed state which in CSS is called active. So we'll get this background we'll copy it. And we'll paste it right here. Right, so now when we click the button, You'll see that the background changes as well. So let's go ahead and add a nice transition. Transition all .2 seconds. Ease in and out. And surprise, surprise, it doesn't work. Technically, this is not a fault for moments. It's just that transition currently doesn't work on gradient backgrounds, right? So you're kind of left with this change of background. With this immediate change of background with no smooth transitions like we have here on these elements. Now, a way around this is to not use a gradient and use a simple color. So you would do a background let's say purple-120. And on the hover, you will do background purple-110. All right, so that will work, no problem. And on active, you will do background, let's say purple-100. All right so you still get that change in background color. It's really up to you if you prefer the linear gradients, then go ahead and use those. But you're not gonna have a transition, or just stick with a solid color. In my case, I'm gonna stick with the linear gradients, because I quite like the way they look. So I'm actually okay with this with the sudden change in background color. And what else? Well, I think that's pretty much it for the buttons really you saw just how easy it is to get these from where they were. And let's actually take a look at this in Firefox. So we started from here, and we ended up here. And all of them look the same, even in different browsers which is good news for us. And these look exactly the same on Windows as well, I've checked. All right, and the buttons are done. Now, let's move on and we're gonna begin styling some more complicated elements. In the next lesson, we're gonna take care of the check boxes. So I'll see you there.