1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:05,000
[Master Class: Designer and Developer Workflow: Button Styling]

3
00:00:05,000 --> 00:00:09,000
[Nick Pettit] Now let's go ahead and style this New Job link 

4
00:00:09,000 --> 00:00:14,000
so that it looks more like a button or a call to action. 

5
00:00:14,000 --> 00:00:17,000
So we'll go ahead and switch over to our text editor

6
00:00:17,000 --> 00:00:21,000
and first, let's just go ahead and look at this index view

7
00:00:21,000 --> 00:00:26,000
so that we can try to identify what this link is called,

8
00:00:26,000 --> 00:00:31,000
and it looks like we can select it with the class "new_job_link".

9
00:00:31,000 --> 00:00:35,000
So here it looks like we have our "new_job_link"

10
00:00:35,000 --> 00:00:40,000
so we'll go ahead and turn this into a button. 

11
00:00:40,000 --> 00:00:45,000
So the first thing I'm going to do is give it a background,

12
00:00:45,000 --> 00:00:50,000
and we'll just say green for now so that we can make sure that we're selecting it properly.

13
00:00:50,000 --> 00:00:54,000
Okay, it looks like it turned to a green background,

14
00:00:54,000 --> 00:01:01,000
so we know we have the right one, and I think I'm going to turn this into a red button

15
00:01:01,000 --> 00:01:07,000
with white text, which is sort of similar to the Easy Jobs! logo. 

16
00:01:07,000 --> 00:01:10,000
It's pretty much the most important thing on the page 

17
00:01:10,000 --> 00:01:13,000
if you're trying to post a new job 

18
00:01:13,000 --> 00:01:15,000
and there's not too many other call-outs like that, 

19
00:01:15,000 --> 00:01:20,000
so I think using a bright color like red here is okay.

20
00:01:20,000 --> 00:01:23,000
So we'll go ahead and switch back.

21
00:01:23,000 --> 00:01:27,000
We'll change the background to just a plain red color for now.

22
00:01:27,000 --> 00:01:31,000
Eventually, we'll switch that over to a gradient. 

23
00:01:31,000 --> 00:01:35,000
We'll go ahead and give it some padding as well;

24
00:01:35,000 --> 00:01:38,000
maybe 5px all the way around. 

25
00:01:38,000 --> 00:01:41,000
Let's just save that and see how it looks so far. 

26
00:01:41,000 --> 00:01:43,000
That looks pretty good. 

27
00:01:43,000 --> 00:01:48,000
The red color is a little bright, so maybe we can tone that down just a little bit 

28
00:01:48,000 --> 00:01:50,000
with a hexidecimal value.

29
00:01:50,000 --> 00:01:55,000
So we'll say full red #FF2222

30
00:01:55,000 --> 00:01:58,000
and then maybe some low greens and blues,

31
00:01:58,000 --> 00:02:02,000
so we'll save that.

32
00:02:02,000 --> 00:02:04,000
And that's still pretty bright,

33
00:02:04,000 --> 00:02:18,000
so maybe we can increase those a bit. 

34
00:02:18,000 --> 00:02:23,000
That's still pretty bright, so let's actually see if we can try to pull

35
00:02:23,000 --> 00:02:28,000
another color we used elsewhere, and if I remember correctly,

36
00:02:28,000 --> 00:02:33,000
we used the color on the job show view for the date.

37
00:02:33,000 --> 00:02:35,000
There it is. 

38
00:02:35,000 --> 00:02:41,000
And let's go ahead and apply that, and that looks much better. 

39
00:02:41,000 --> 00:02:45,000
And again, we'll go ahead and apply a gradient or something

40
00:02:45,000 --> 00:02:48,000
to give this some 3-D definition, but that looks good for now.

41
00:02:48,000 --> 00:02:50,000
So let's go ahead and switch back.

42
00:02:50,000 --> 00:02:54,000
We want to remove the underlying or text decoration,

43
00:02:54,000 --> 00:02:57,000
so we'll say text decoration: none. 

44
00:02:57,000 --> 00:03:03,000
We'll change the font color to pure white

45
00:03:03,000 --> 00:03:06,000
and let's give it a text-shadow

46
00:03:06,000 --> 00:03:11,000
and we'll say 0px for the x offset, 

47
00:03:11,000 --> 00:03:15,000
-1px for the y offset.

48
00:03:15,000 --> 00:03:18,000
We'll give it a blur radius of 1px

49
00:03:18,000 --> 00:03:24,000
and then we'll use the RGBA color function, set it to black,

50
00:03:24,000 --> 00:03:28,000
and then we'll give it 80% opacity.

51
00:03:28,000 --> 00:03:32,000
So let's go ahead and save that out and we'll refresh the page,

52
00:03:32,000 --> 00:03:35,000
and as you can see, that slight text shadow

53
00:03:35,000 --> 00:03:40,000
gives this a little bit of a letter impress look, 

54
00:03:40,000 --> 00:03:44,000
as if the letters are actually punched into that button.

55
00:03:44,000 --> 00:03:48,000
I like that a lot, so let's go ahead and continue. 

56
00:03:48,000 --> 00:03:59,000
Next, we're going to add a border, and we'll make this a nice thick border of 4px.

57
00:03:59,000 --> 00:04:06,000
We'll make it solid, and let's go ahead and set the color to white.

58
00:04:06,000 --> 00:04:10,000
So we'll save that, and let's see what that looks like. 

59
00:04:10,000 --> 00:04:14,000
Well, we can't quite see it yet, but I bet we could see that border a lot better

60
00:04:14,000 --> 00:04:18,000
if we added a box shadow, so let's go ahead and try that out.

61
00:04:18,000 --> 00:04:27,000
We'll say box-shadow: and give it a value of 0px for the x offset,

62
00:04:27,000 --> 00:04:30,000
a value of 1px for the y offset.

63
00:04:30,000 --> 00:04:36,000
We'll give it a small blur radius of 3px,

64
00:04:36,000 --> 00:04:40,000
and again, we'll use the RGBA color function, set it to black (0,0,0,0)

65
00:04:40,000 --> 00:04:44,000
and dial down the opacity to maybe about 70%,

66
00:04:44,000 --> 00:04:48,000
so let's see what that looks like. 

67
00:04:48,000 --> 00:04:52,000
So that's starting to look pretty good; we can see that white border. 

68
00:04:52,000 --> 00:04:58,000
I think I am going to increase the blur radius or the spread on the box shadow a little bit 

69
00:04:58,000 --> 00:05:02,000
just so that we can see that border a bit more, but that's looking pretty good so far.

70
00:05:02,000 --> 00:05:05,000
So let's go ahead and switch back

71
00:05:05,000 --> 00:05:13,000
and let's go ahead and increase the size of that shadow 6px.

72
00:05:13,000 --> 00:05:19,000
That looks a little better, and maybe we'll add a spread of 2px.

73
00:05:19,000 --> 00:05:24,000
That looks like it's a little too much. 

74
00:05:24,000 --> 00:05:27,000
And I think that's starting to look pretty good. 

75
00:05:27,000 --> 00:05:35,000
We'll set it to 4 and we'll dial down the opacity quite a bit to maybe 40%

76
00:05:35,000 --> 00:05:37,000
and I think that looks pretty good. 

77
00:05:37,000 --> 00:05:42,000
We'll just push it down a little more to 30%.

78
00:05:42,000 --> 00:05:47,000
And next, let's round off those corners, so we'll say border-radius, 

79
00:05:47,000 --> 00:05:53,000
and actually, I'm going to use webkit-border-radius: 

80
00:05:53,000 --> 00:05:59,000
and we'll do this for mozilla as well and all the other CSS3 properties we're using

81
00:05:59,000 --> 00:06:03,000
to ensure maximum cross-browser support. 

82
00:06:03,000 --> 00:06:08,000
For the border-radius, I'll just put a small value of 6px 

83
00:06:08,000 --> 00:06:12,000
so let's just see what that looks like. 

84
00:06:12,000 --> 00:06:13,000
That looks pretty good.

85
00:06:13,000 --> 00:06:16,000
I think I would like to round the borders a little bit more,

86
00:06:16,000 --> 00:06:22,000
maybe to 8, and now that I look at it, I think I would also like to increase the border

87
00:06:22,000 --> 00:06:25,000
to about 5px.

88
00:06:25,000 --> 00:06:28,000
This is starting to look much better. 

89
00:06:28,000 --> 00:06:33,000
And now, let's go ahead and add in those webkit and mozilla properties.

90
00:06:33,000 --> 00:06:39,000
So we'll say -moz and then we'll just go ahead and copy this border-radius property here

91
00:06:39,000 --> 00:06:43,000
and then we'll go ahead and paste it in one more time. 

92
00:06:43,000 --> 00:06:48,000
Remember, you always want to start out with the vendor prefix properties

93
00:06:48,000 --> 00:06:51,000
and then end with the real property 

94
00:06:51,000 --> 00:06:56,000
so that should the browser actually support the real property without vendor prefixes,

95
00:06:56,000 --> 00:07:00,000
that will override the previous declarations.

96
00:07:00,000 --> 00:07:02,000
So we'll do the same for box-shadow. 

97
00:07:02,000 --> 00:07:08,000
We'll copy this line and we'll paste it in two more times here,

98
00:07:08,000 --> 00:07:13,000
and we'll say -webkit-box-shadow and then -moz-box-shadow

99
00:07:13,000 --> 00:07:18,000
and we'll also do that for the text-shadow.

100
00:07:18,000 --> 00:07:25,000
So again, we'll say -webkit-text-shadow and -moz-text-shadow. 

101
00:07:25,000 --> 00:07:28,000
So we'll save that out, we'll refresh in the browser.

102
00:07:28,000 --> 00:07:30,000
There shouldn't be anything different 

103
00:07:30,000 --> 00:07:34,000
and there isn't, which means we did everything correctly.

104
00:07:34,000 --> 00:07:41,000
And I'm also noticing that this New Job button is running right up against this list of jobs,

105
00:07:41,000 --> 00:07:45,000
so let's go ahead and give it a little bit of margin and separation. 

106
00:07:45,000 --> 00:07:48,000
So I'll go ahead and switch back. 

107
00:07:48,000 --> 00:07:51,000
Right now, it looks like it's floated to the right, 

108
00:07:51,000 --> 00:07:55,000
so there may be some clearing involved, but let's just go ahead and add the margin

109
00:07:55,000 --> 00:07:57,000
to see what happens. 

110
00:07:57,000 --> 00:08:00,000
So we'll say margin-bottom: 

111
00:08:00,000 --> 00:08:02,000
and we'll start out with a high value like 20px 

112
00:08:02,000 --> 00:08:07,000
just to make sure we're targeting it correctly. 

113
00:08:07,000 --> 00:08:09,000
And there we go. 

114
00:08:09,000 --> 00:08:11,000
That actually looks perfect. 

115
00:08:11,000 --> 00:08:14,000
I think the 20px is just right.

116
00:08:14,000 --> 00:08:17,000
I think I actually will maybe add a little bit more.

117
00:08:17,000 --> 00:08:19,000
We'll bump it up to about 24px on the bottom,

118
00:08:19,000 --> 00:08:22,000
and I think that looks pretty good. 

119
00:08:22,000 --> 00:08:27,000
Now, I said we were going to add in a gradient to give this some definition,

120
00:08:27,000 --> 00:08:33,000
but now that I see it with the box-shadow and the border around it,

121
00:08:33,000 --> 00:08:37,000
I think this looks enough like a button that we actually can get away with adding

122
00:08:37,000 --> 00:08:39,000
no 3-D definition to it at all. 

123
00:08:39,000 --> 00:08:41,000
I think this looks fine as it is. 

124
00:08:41,000 --> 00:08:44,000
One change that I would like to make right now

125
00:08:44,000 --> 00:08:46,000
is maybe add some padding on the left and right,

126
00:08:46,000 --> 00:08:50,000
so let's go ahead and do that. 

127
00:08:50,000 --> 00:08:52,000
The padding on the top and bottom looks pretty good to me,

128
00:08:52,000 --> 00:08:54,000
so we'll leave that at 5px. 

129
00:08:54,000 --> 00:08:59,000
But on the left and right, we'll increase it to maybe 10px

130
00:08:59,000 --> 00:09:02,000
and there we go. 

131
00:09:02,000 --> 00:09:04,000
I think that looks perfect. 

132
00:09:04,000 --> 00:09:09,000
So now, we need to go ahead and add a hover state and possibly an active state

133
00:09:09,000 --> 00:09:11,000
for this button. 

134
00:09:11,000 --> 00:09:14,000
Let's go ahead and do that now.

135
00:09:14,000 --> 00:09:17,000
We already have our new_job_link here, 

136
00:09:17,000 --> 00:09:24,000
so all we need to do is say &:hover

137
00:09:24,000 --> 00:09:29,000
and that will put the pseudo-class onto the new_job_link class 

138
00:09:29,000 --> 00:09:32,000
because we're using SASS, so this ampersand will go ahead 

139
00:09:32,000 --> 00:09:37,000
and just put it right up against the new_job_link with no space,

140
00:09:37,000 --> 00:09:39,000
so that's what we want. 

141
00:09:39,000 --> 00:09:46,000
And for the hover state, I think I'll go ahead and first increase the box-shadow just a little bit 

142
00:09:46,000 --> 00:09:49,000
and that's always a really nice effect that you can do 

143
00:09:49,000 --> 00:09:51,000
because shadows don't actually take up any space.

144
00:09:51,000 --> 00:09:56,000
So you can just bump up the shadow a little bit here,

145
00:09:56,000 --> 00:10:00,000
so we'll increase the blur radius, we'll increase the spread, 

146
00:10:00,000 --> 00:10:04,000
and maybe even increase the opacity just a little bit here. 

147
00:10:04,000 --> 00:10:08,000
So before we make any other changes, let's go ahead and see what that looks like. 

148
00:10:08,000 --> 00:10:09,000
Okay. 

149
00:10:09,000 --> 00:10:13,000
So we've refreshed the page and when we hover over the New Job link, 

150
00:10:13,000 --> 00:10:17,000
it looks like nothing's happening, so let's switch back to the code

151
00:10:17,000 --> 00:10:20,000
and see what went wrong here. 

152
00:10:20,000 --> 00:10:24,000
It looks like this just needs to be indented a bit more, 

153
00:10:24,000 --> 00:10:27,000
so let's save that and see if that fixes it. 

154
00:10:27,000 --> 00:10:29,000
There we go. 

155
00:10:29,000 --> 00:10:33,000
I think it would also be nice to maybe put some transitions on this

156
00:10:33,000 --> 00:10:36,000
and in fact, when we make the site a lot more responsive, 

157
00:10:36,000 --> 00:10:40,000
it would be really nice to put some transitions on the entire site 

158
00:10:40,000 --> 00:10:45,000
so that when media queries kick in and the layout rearranges or adjusts itself, 

159
00:10:45,000 --> 00:10:48,000
those transitions animate smoothly.

160
00:10:48,000 --> 00:10:58,000
So let's do a neat little trick here up at the top of the style sheet.

161
00:10:58,000 --> 00:11:05,000
I'm going to select everything by using the * selector

162
00:11:05,000 --> 00:11:18,000
and then, I'm going to say webkit-transition: and I'm going to put a time on it of 0.1 seconds

163
00:11:18,000 --> 00:11:20,000
and I'm going to make it a linear transition.

164
00:11:20,000 --> 00:11:26,000
So we'll save that, switch back to the browser and refresh the page.

165
00:11:26,000 --> 00:11:31,000
And now when we hover over this element, it is very subtle,

166
00:11:31,000 --> 00:11:38,000
but there is just a slight little transition of 0.1 seconds on that shadow that appears,

167
00:11:38,000 --> 00:11:41,000
and that makes things look just a little bit smoother 

168
00:11:41,000 --> 00:11:45,000
and the shadow animates instead of just popping into place,

169
00:11:45,000 --> 00:11:47,000
so I think that's really nice. 

170
00:11:47,000 --> 00:11:49,000
Let's get back to this hover state,

171
00:11:49,000 --> 00:11:52,000
so I'll scroll back down here

172
00:11:52,000 --> 00:11:56,000
and let's go ahead and change the background color.

173
00:11:56,000 --> 00:12:04,000
So we'll say background: and let's start out by grabbing our original color

174
00:12:04,000 --> 00:12:07,000
and we'll paste it in there,

175
00:12:07,000 --> 00:12:11,000
and let's see what happens when we darken this.

176
00:12:11,000 --> 00:12:19,000
So we'll bump it down to maybe C or even B just to make sure that we can really see it.

177
00:12:19,000 --> 00:12:21,000
We'll save that, refresh, 

178
00:12:21,000 --> 00:12:25,000
and when we hover over, I think that looks pretty good. 

179
00:12:25,000 --> 00:12:29,000
I think the color is a bit harsh,

180
00:12:29,000 --> 00:12:33,000
so we'll increase it just a little bit in brightness

181
00:12:33,000 --> 00:12:35,000
and I think that looks pretty good.

182
00:12:35,000 --> 00:12:41,000
I think it's just enough to show that it's being hovered over

183
00:12:41,000 --> 00:12:44,000
and I really like this hover state, so I'm just going to go ahead 

184
00:12:44,000 --> 00:12:47,000
and use it for the active state as well.

185
00:12:47,000 --> 00:12:50,000
So I'll put a comma in front of hover

186
00:12:50,000 --> 00:12:56,000
and I'll add the pseudo-class active and save that. 

187
00:12:56,000 --> 00:12:58,000
And so now, when I refresh, 

188
00:12:58,000 --> 00:13:03,000
I should be able to use the Tab key to cycle through each of the elements

189
00:13:03,000 --> 00:13:07,000
and in Google Chrome, it will add this blue outline,

190
00:13:07,000 --> 00:13:13,000
but we can be assured that the active state is most definitely there

191
00:13:13,000 --> 00:13:17,000
and it will appear in other browsers a little bit more clearly.

192
00:13:17,000 --> 00:13:21,000
I think that should about wrap it up for this button, so we're ready to move on.