Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Design and Development!
You have completed Design and Development!
Preview
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up