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
Preview
Start a free Courses trial
to watch this video
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