How to Style a CSS3 Button13:21 with Nick Pettit
In this video, we'll style the "New Job" button. Specifically, we'll use CSS3 to create a look that's in line with the rest of the site.
[?music?] 0:00 [Master Class: Designer and Developer Workflow: Button Styling] 0:02 [Nick Pettit] Now let's go ahead and style this New Job link 0:05 so that it looks more like a button or a call to action. 0:09 So we'll go ahead and switch over to our text editor 0:14 and first, let's just go ahead and look at this index view 0:17 so that we can try to identify what this link is called, 0:21 and it looks like we can select it with the class "new_job_link". 0:26 So here it looks like we have our "new_job_link" 0:31 so we'll go ahead and turn this into a button. 0:35 So the first thing I'm going to do is give it a background, 0:40 and we'll just say green for now so that we can make sure that we're selecting it properly. 0:45 Okay, it looks like it turned to a green background, 0:50 so we know we have the right one, and I think I'm going to turn this into a red button 0:54 with white text, which is sort of similar to the Easy Jobs! logo. 1:01 It's pretty much the most important thing on the page 1:07 if you're trying to post a new job 1:10 and there's not too many other call-outs like that, 1:13 so I think using a bright color like red here is okay. 1:15 So we'll go ahead and switch back. 1:20 We'll change the background to just a plain red color for now. 1:23 Eventually, we'll switch that over to a gradient. 1:27 We'll go ahead and give it some padding as well; 1:31 maybe 5px all the way around. 1:35 Let's just save that and see how it looks so far. 1:38 That looks pretty good. 1:41 The red color is a little bright, so maybe we can tone that down just a little bit 1:43 with a hexidecimal value. 1:48 So we'll say full red #FF2222 1:50 and then maybe some low greens and blues, 1:55 so we'll save that. 1:58 And that's still pretty bright, 2:02 so maybe we can increase those a bit. 2:04 That's still pretty bright, so let's actually see if we can try to pull 2:18 another color we used elsewhere, and if I remember correctly, 2:23 we used the color on the job show view for the date. 2:28 There it is. 2:33 And let's go ahead and apply that, and that looks much better. 2:35 And again, we'll go ahead and apply a gradient or something 2:41 to give this some 3-D definition, but that looks good for now. 2:45 So let's go ahead and switch back. 2:48 We want to remove the underlying or text decoration, 2:50 so we'll say text decoration: none. 2:54 We'll change the font color to pure white 2:57 and let's give it a text-shadow 3:03 and we'll say 0px for the x offset, 3:06 -1px for the y offset. 3:11 We'll give it a blur radius of 1px 3:15 and then we'll use the RGBA color function, set it to black, 3:18 and then we'll give it 80% opacity. 3:24 So let's go ahead and save that out and we'll refresh the page, 3:28 and as you can see, that slight text shadow 3:32 gives this a little bit of a letter impress look, 3:35 as if the letters are actually punched into that button. 3:40 I like that a lot, so let's go ahead and continue. 3:44 Next, we're going to add a border, and we'll make this a nice thick border of 4px. 3:48 We'll make it solid, and let's go ahead and set the color to white. 3:59 So we'll save that, and let's see what that looks like. 4:06 Well, we can't quite see it yet, but I bet we could see that border a lot better 4:10 if we added a box shadow, so let's go ahead and try that out. 4:14 We'll say box-shadow: and give it a value of 0px for the x offset, 4:18 a value of 1px for the y offset. 4:27 We'll give it a small blur radius of 3px, 4:30 and again, we'll use the RGBA color function, set it to black (0,0,0,0) 4:36 and dial down the opacity to maybe about 70%, 4:40 so let's see what that looks like. 4:44 So that's starting to look pretty good; we can see that white border. 4:48 I think I am going to increase the blur radius or the spread on the box shadow a little bit 4:52 just so that we can see that border a bit more, but that's looking pretty good so far. 4:58 So let's go ahead and switch back 5:02 and let's go ahead and increase the size of that shadow 6px. 5:05 That looks a little better, and maybe we'll add a spread of 2px. 5:13 That looks like it's a little too much. 5:19 And I think that's starting to look pretty good. 5:24 We'll set it to 4 and we'll dial down the opacity quite a bit to maybe 40% 5:27 and I think that looks pretty good. 5:35 We'll just push it down a little more to 30%. 5:37 And next, let's round off those corners, so we'll say border-radius, 5:42 and actually, I'm going to use webkit-border-radius: 5:47 and we'll do this for mozilla as well and all the other CSS3 properties we're using 5:53 to ensure maximum cross-browser support. 5:59 For the border-radius, I'll just put a small value of 6px 6:03 so let's just see what that looks like. 6:08 That looks pretty good. 6:12 I think I would like to round the borders a little bit more, 6:13 maybe to 8, and now that I look at it, I think I would also like to increase the border 6:16 to about 5px. 6:22 This is starting to look much better. 6:25 And now, let's go ahead and add in those webkit and mozilla properties. 6:28 So we'll say -moz and then we'll just go ahead and copy this border-radius property here 6:33 and then we'll go ahead and paste it in one more time. 6:39 Remember, you always want to start out with the vendor prefix properties 6:43 and then end with the real property 6:48 so that should the browser actually support the real property without vendor prefixes, 6:51 that will override the previous declarations. 6:56 So we'll do the same for box-shadow. 7:00 We'll copy this line and we'll paste it in two more times here, 7:02 and we'll say -webkit-box-shadow and then -moz-box-shadow 7:08 and we'll also do that for the text-shadow. 7:13 So again, we'll say -webkit-text-shadow and -moz-text-shadow. 7:18 So we'll save that out, we'll refresh in the browser. 7:25 There shouldn't be anything different 7:28 and there isn't, which means we did everything correctly. 7:30 And I'm also noticing that this New Job button is running right up against this list of jobs, 7:34 so let's go ahead and give it a little bit of margin and separation. 7:41 So I'll go ahead and switch back. 7:45 Right now, it looks like it's floated to the right, 7:48 so there may be some clearing involved, but let's just go ahead and add the margin 7:51 to see what happens. 7:55 So we'll say margin-bottom: 7:57 and we'll start out with a high value like 20px 8:00 just to make sure we're targeting it correctly. 8:02 And there we go. 8:07 That actually looks perfect. 8:09 I think the 20px is just right. 8:11 I think I actually will maybe add a little bit more. 8:14 We'll bump it up to about 24px on the bottom, 8:17 and I think that looks pretty good. 8:19 Now, I said we were going to add in a gradient to give this some definition, 8:22 but now that I see it with the box-shadow and the border around it, 8:27 I think this looks enough like a button that we actually can get away with adding 8:33 no 3-D definition to it at all. 8:37 I think this looks fine as it is. 8:39 One change that I would like to make right now 8:41 is maybe add some padding on the left and right, 8:44 so let's go ahead and do that. 8:46 The padding on the top and bottom looks pretty good to me, 8:50 so we'll leave that at 5px. 8:52 But on the left and right, we'll increase it to maybe 10px 8:54 and there we go. 8:59 I think that looks perfect. 9:02 So now, we need to go ahead and add a hover state and possibly an active state 9:04 for this button. 9:09 Let's go ahead and do that now. 9:11 We already have our new_job_link here, 9:14 so all we need to do is say &:hover 9:17 and that will put the pseudo-class onto the new_job_link class 9:24 because we're using SASS, so this ampersand will go ahead 9:29 and just put it right up against the new_job_link with no space, 9:32 so that's what we want. 9:37 And for the hover state, I think I'll go ahead and first increase the box-shadow just a little bit 9:39 and that's always a really nice effect that you can do 9:46 because shadows don't actually take up any space. 9:49 So you can just bump up the shadow a little bit here, 9:51 so we'll increase the blur radius, we'll increase the spread, 9:56 and maybe even increase the opacity just a little bit here. 10:00 So before we make any other changes, let's go ahead and see what that looks like. 10:04 Okay. 10:08 So we've refreshed the page and when we hover over the New Job link, 10:09 it looks like nothing's happening, so let's switch back to the code 10:13 and see what went wrong here. 10:17 It looks like this just needs to be indented a bit more, 10:20 so let's save that and see if that fixes it. 10:24 There we go. 10:27 I think it would also be nice to maybe put some transitions on this 10:29 and in fact, when we make the site a lot more responsive, 10:33 it would be really nice to put some transitions on the entire site 10:36 so that when media queries kick in and the layout rearranges or adjusts itself, 10:40 those transitions animate smoothly. 10:45 So let's do a neat little trick here up at the top of the style sheet. 10:48 I'm going to select everything by using the * selector 10:58 and then, I'm going to say webkit-transition: and I'm going to put a time on it of 0.1 seconds 11:05 and I'm going to make it a linear transition. 11:18 So we'll save that, switch back to the browser and refresh the page. 11:20 And now when we hover over this element, it is very subtle, 11:26 but there is just a slight little transition of 0.1 seconds on that shadow that appears, 11:31 and that makes things look just a little bit smoother 11:38 and the shadow animates instead of just popping into place, 11:41 so I think that's really nice. 11:45 Let's get back to this hover state, 11:47 so I'll scroll back down here 11:49 and let's go ahead and change the background color. 11:52 So we'll say background: and let's start out by grabbing our original color 11:56 and we'll paste it in there, 12:04 and let's see what happens when we darken this. 12:07 So we'll bump it down to maybe C or even B just to make sure that we can really see it. 12:11 We'll save that, refresh, 12:19 and when we hover over, I think that looks pretty good. 12:21 I think the color is a bit harsh, 12:25 so we'll increase it just a little bit in brightness 12:29 and I think that looks pretty good. 12:33 I think it's just enough to show that it's being hovered over 12:35 and I really like this hover state, so I'm just going to go ahead 12:41 and use it for the active state as well. 12:44 So I'll put a comma in front of hover 12:47 and I'll add the pseudo-class active and save that. 12:50 And so now, when I refresh, 12:56 I should be able to use the Tab key to cycle through each of the elements 12:58 and in Google Chrome, it will add this blue outline, 13:03 but we can be assured that the active state is most definitely there 13:07 and it will appear in other browsers a little bit more clearly. 13:13 I think that should about wrap it up for this button, so we're ready to move on. 13:17
You need to sign up for Treehouse in order to download course files.Sign up