1
00:00:01.02 --> 00:00:02.05
- [Instructor] Hi, this is Chris Converse

2
00:00:02.05 --> 00:00:05.01
and in this episode, we'll
take a standard hyperlink

3
00:00:05.01 --> 00:00:07.02
and transform it into a
button, creating a much more

4
00:00:07.02 --> 00:00:09.03
compelling call to action.

5
00:00:09.03 --> 00:00:11.06
We'll also be making use
of the CSS Pseudo-Element

6
00:00:11.06 --> 00:00:14.00
to create a text-based
arrow, as well as setting up

7
00:00:14.00 --> 00:00:15.03
the hover state.

8
00:00:15.03 --> 00:00:17.07
So, if you'd like to follow
along, download the exercise

9
00:00:17.07 --> 00:00:21.02
files and let's begin by
opening the Index.html file

10
00:00:21.02 --> 00:00:24.04
in a text editor.

11
00:00:24.04 --> 00:00:26.00
And once you have the file
open in your text editor,

12
00:00:26.00 --> 00:00:28.04
you 'll see that we have a
really simple web page here.

13
00:00:28.04 --> 00:00:30.05
And if you'd like to
preview what we have so far,

14
00:00:30.05 --> 00:00:33.09
you can open up the index.html
file up in a web browser.

15
00:00:33.09 --> 00:00:35.08
And here you can see we
have a background image

16
00:00:35.08 --> 00:00:36.09
with a text block.

17
00:00:36.09 --> 00:00:39.06
Over in the html, you'll
see that after the paragraph

18
00:00:39.06 --> 00:00:42.05
content, we have an anchor
link showing up down here,

19
00:00:42.05 --> 00:00:45.01
which we can also see over
here in the preview area.

20
00:00:45.01 --> 00:00:47.08
So, this is how we style
the default text links.

21
00:00:47.08 --> 00:00:49.06
So, before we conform this
into a button, the first

22
00:00:49.06 --> 00:00:53.01
thing we'll do is add a
class to this anchor tag.

23
00:00:53.01 --> 00:00:56.08
So over here in the html
file, let's add class equals

24
00:00:56.08 --> 00:01:01.02
two quotes, and then the
letters btn for button.

25
00:01:01.02 --> 00:01:04.00
This way the changes we
make won't affect all

26
00:01:04.00 --> 00:01:04.08
of the anchor links.

27
00:01:04.08 --> 00:01:08.01
They'll only affect the ones
with the class of button.

28
00:01:08.01 --> 00:01:09.07
And so, with that change
in place, let's go back

29
00:01:09.07 --> 00:01:12.09
to the exercise files and
let's open up the file called

30
00:01:12.09 --> 00:01:15.07
style.css in our text editor.

31
00:01:15.07 --> 00:01:17.07
So, inside here you can see
all the styles that make up

32
00:01:17.07 --> 00:01:19.06
this basic page layout.

33
00:01:19.06 --> 00:01:22.08
Let's scroll down to the
bottom and here we can see

34
00:01:22.08 --> 00:01:25.07
the two links that style
the basic anchor tags.

35
00:01:25.07 --> 00:01:27.05
So, we have an anchor
and and anchor with a

36
00:01:27.05 --> 00:01:32.00
pseudo class of hover, so
that's the hover state.

37
00:01:32.00 --> 00:01:34.03
Let's add a few lines and
let's come down here and

38
00:01:34.03 --> 00:01:36.02
create a rule that's going
to target the anchor tags

39
00:01:36.02 --> 00:01:38.00
with a class of button.

40
00:01:38.00 --> 00:01:40.06
We'll type a.btn,

41
00:01:40.06 --> 00:01:43.03
put in our brackets,

42
00:01:43.03 --> 00:01:46.06
add a few returns and space this out.

43
00:01:46.06 --> 00:01:47.05
So, the first property
we're going to set is

44
00:01:47.05 --> 00:01:51.01
going to be the display type,
so we'll set display: to

45
00:01:51.01 --> 00:01:53.00
inline block.

46
00:01:53.00 --> 00:01:55.05
Now, we're doing this in
case the anchor link actually

47
00:01:55.05 --> 00:01:57.00
wraps the two lines.

48
00:01:57.00 --> 00:01:59.01
We'll get the entire anchor link element

49
00:01:59.01 --> 00:02:00.07
inside of one rectangle.

50
00:02:00.07 --> 00:02:03.02
On the next line, let's
set some margin properties.

51
00:02:03.02 --> 00:02:05.08
So, we'll use shorthand style
here, so for the top and

52
00:02:05.08 --> 00:02:08.02
bottom, we'll set 10 pixels,
and for the right and left,

53
00:02:08.02 --> 00:02:10.00
we'll set zero.

54
00:02:10.00 --> 00:02:12.04
Next, we'll set the text color, so that's

55
00:02:12.04 --> 00:02:15.08
color, colon, space, pound sign

56
00:02:15.08 --> 00:02:19.04
We're going to set zero
zero for red, 8c for green,

57
00:02:19.04 --> 00:02:22.08
and da for blue and that's
going to give us that medium

58
00:02:22.08 --> 00:02:26.06
blue color we can see over in the preview.

59
00:02:26.06 --> 00:02:28.04
Next, we'll set a background
color so the type is

60
00:02:28.04 --> 00:02:31.00
easier to read and for
the background color,

61
00:02:31.00 --> 00:02:36.07
we're going to set this to white,
so pound sign and three f's.

62
00:02:36.07 --> 00:02:40.00
Next line, let's set some
padding, so that's going to give

63
00:02:40.00 --> 00:02:43.04
us some padding inside that white box.

64
00:02:43.04 --> 00:02:45.05
So, we're going to set
this to eight pixels

65
00:02:45.05 --> 00:02:47.03
for the top and bottom, and then 20 pixels

66
00:02:47.03 --> 00:02:51.03
for the right and left.

67
00:02:51.03 --> 00:02:53.08
Next line, let's set border-radius:

68
00:02:53.08 --> 00:02:56.07
We're going to set this to
seven pixels; that'll give us

69
00:02:56.07 --> 00:03:00.00
some rounded corners.

70
00:03:00.00 --> 00:03:02.05
Next, we'll set text-decoration:

71
00:03:02.05 --> 00:03:03.09
We're going to set this to none.

72
00:03:03.09 --> 00:03:06.02
That's going to remove the underline.

73
00:03:06.02 --> 00:03:07.07
And then finally, let's set the font size

74
00:03:07.07 --> 00:03:10.05
a little bit smaller.

75
00:03:10.05 --> 00:03:13.00
And then next, we'll set the font weight.

76
00:03:13.00 --> 00:03:17.02
We're going to set this to 700.

77
00:03:17.02 --> 00:03:20.02
And then finally, we'll set the
font size to point nine ems,

78
00:03:20.02 --> 00:03:22.08
making it 10% smaller
than the paragraph text.

79
00:03:22.08 --> 00:03:25.00
And so with these rules
in place, now let's use a

80
00:03:25.00 --> 00:03:28.07
pseudo-element to add a text
arrow that points to the right.

81
00:03:28.07 --> 00:03:32.03
So a.btn, then two colons,

82
00:03:32.03 --> 00:03:35.04
then the word after,

83
00:03:35.04 --> 00:03:37.07
put in our brackets, and hit return.

84
00:03:37.07 --> 00:03:39.04
In order for a pseudo-element
to show up, we need to

85
00:03:39.04 --> 00:03:45.01
add the content property,
so type content: + space,

86
00:03:45.01 --> 00:03:47.07
then two tick marks for a
string, then a semi-colon

87
00:03:47.07 --> 00:03:50.05
And then inside the string,
we're going to use the UNICODE

88
00:03:50.05 --> 00:03:53.02
character for the double right arrow.

89
00:03:53.02 --> 00:03:56.06
So that will start with a
backslash, zero zero and then

90
00:03:56.06 --> 00:03:59.05
two capital B's.

91
00:03:59.05 --> 00:04:01.08
So now we can see those
showing up in the preview,

92
00:04:01.08 --> 00:04:04.00
after the letter 'e' in more.

93
00:04:04.00 --> 00:04:07.01
Then after the content: property,
let's add a padding left

94
00:04:07.01 --> 00:04:09.03
and we'll set this to eight
pixels just to give us a

95
00:04:09.03 --> 00:04:12.00
little more space between
the arrows and the text.

96
00:04:12.00 --> 00:04:14.01
And then finally, we'll add
a hover state to our button.

97
00:04:14.01 --> 00:04:17.03
So next, let's add another selector a.btn,

98
00:04:17.03 --> 00:04:19.06
one single colon

99
00:04:19.06 --> 00:04:23.01
then hover, creating a pseudo class,

100
00:04:23.01 --> 00:04:26.02
and here we'll start
by changing the color.

101
00:04:26.02 --> 00:04:29.02
So, we'll set the text color
to white, so that's the

102
00:04:29.02 --> 00:04:31.03
pound sign and three f's.

103
00:04:31.03 --> 00:04:33.03
Now, we'll set the background
color to match the color

104
00:04:33.03 --> 00:04:35.09
of the type.

105
00:04:35.09 --> 00:04:39.05
So, background color:

106
00:04:39.05 --> 00:04:44.03
I'll come up here and copy the #008cda,

107
00:04:44.03 --> 00:04:46.03
come down here and paste it.

108
00:04:46.03 --> 00:04:48.01
And so with these in place,
you can go over to your browser

109
00:04:48.01 --> 00:04:50.06
and then if you move your
cursor over top of the button,

110
00:04:50.06 --> 00:04:53.06
you'll now see all of the
hover state properties.

111
00:04:53.06 --> 00:04:55.06
Now, if you'd like to see
more examples of transforming

112
00:04:55.06 --> 00:04:58.07
hyperlinks into buttons, check
out chapter two of our course

113
00:04:58.07 --> 00:05:01.07
called Creating a Responsive
Web Design here in the library.

114
00:05:01.07 --> 00:05:03.02
And to explore more things that you can do

115
00:05:03.02 --> 00:05:06.00
with pseudo-elements, we have
another course here entitled,

116
00:05:06.00 --> 00:05:08.06
Graphics and CSS Pseudo-Elements

117
00:05:08.06 --> 00:05:10.08
And so that concludes our brief
look at turning a hyperlink

118
00:05:10.08 --> 00:05:13.05
into a button, and as always,

119
00:05:13.05 --> 00:05:15.02
Thanks for watching.