- [Instructor] Hi, this is Chris Converse
and in this episode, we'll take a standard hyperlink
and transform it into a button, creating a much more
compelling call to action.
We'll also be making use of the CSS Pseudo-Element
to create a text-based arrow, as well as setting up
the hover state.
So, if you'd like to follow along, download the exercise
files and let's begin by opening the Index.html file
in a text editor.
And once you have the file open in your text editor,
you 'll see that we have a really simple web page here.
And if you'd like to preview what we have so far,
you can open up the index.html file up in a web browser.
And here you can see we have a background image
with a text block.
Over in the html, you'll see that after the paragraph
content, we have an anchor link showing up down here,
which we can also see over here in the preview area.
So, this is how we style the default text links.
So, before we conform this into a button, the first
thing we'll do is add a class to this anchor tag.
So over here in the html file, let's add class equals
two quotes, and then the letters btn for button.
This way the changes we make won't affect all
of the anchor links.
They'll only affect the ones with the class of button.
And so, with that change in place, let's go back
to the exercise files and let's open up the file called
style.css in our text editor.
So, inside here you can see all the styles that make up
this basic page layout.
Let's scroll down to the bottom and here we can see
the two links that style the basic anchor tags.
So, we have an anchor and and anchor with a
pseudo class of hover, so that's the hover state.
Let's add a few lines and let's come down here and
create a rule that's going to target the anchor tags
with a class of button.
We'll type a.btn,
put in our brackets,
add a few returns and space this out.
So, the first property we're going to set is
going to be the display type, so we'll set display: to
inline block.
Now, we're doing this in case the anchor link actually
wraps the two lines.
We'll get the entire anchor link element
inside of one rectangle.
On the next line, let's set some margin properties.
So, we'll use shorthand style here, so for the top and
bottom, we'll set 10 pixels, and for the right and left,
we'll set zero.
Next, we'll set the text color, so that's
color, colon, space, pound sign
We're going to set zero zero for red, 8c for green,
and da for blue and that's going to give us that medium
blue color we can see over in the preview.
Next, we'll set a background color so the type is
easier to read and for the background color,
we're going to set this to white, so pound sign and three f's.
Next line, let's set some padding, so that's going to give
us some padding inside that white box.
So, we're going to set this to eight pixels
for the top and bottom, and then 20 pixels
for the right and left.
Next line, let's set border-radius:
We're going to set this to seven pixels; that'll give us
some rounded corners.
Next, we'll set text-decoration:
We're going to set this to none.
That's going to remove the underline.
And then finally, let's set the font size
a little bit smaller.
And then next, we'll set the font weight.
We're going to set this to 700.
And then finally, we'll set the font size to point nine ems,
making it 10% smaller than the paragraph text.
And so with these rules in place, now let's use a
pseudo-element to add a text arrow that points to the right.
So a.btn, then two colons,
then the word after,
put in our brackets, and hit return.
In order for a pseudo-element to show up, we need to
add the content property, so type content: + space,
then two tick marks for a string, then a semi-colon
And then inside the string, we're going to use the UNICODE
character for the double right arrow.
So that will start with a backslash, zero zero and then
two capital B's.
So now we can see those showing up in the preview,
after the letter 'e' in more.
Then after the content: property, let's add a padding left
and we'll set this to eight pixels just to give us a
little more space between the arrows and the text.
And then finally, we'll add a hover state to our button.
So next, let's add another selector a.btn,
one single colon
then hover, creating a pseudo class,
and here we'll start by changing the color.
So, we'll set the text color to white, so that's the
pound sign and three f's.
Now, we'll set the background color to match the color
of the type.
So, background color:
I'll come up here and copy the #008cda,
come down here and paste it.
And so with these in place, you can go over to your browser
and then if you move your cursor over top of the button,
you'll now see all of the hover state properties.
Now, if you'd like to see more examples of transforming
hyperlinks into buttons, check out chapter two of our course
called Creating a Responsive Web Design here in the library.
And to explore more things that you can do
with pseudo-elements, we have another course here entitled,
Graphics and CSS Pseudo-Elements
And so that concludes our brief look at turning a hyperlink
into a button, and as always,
Thanks for watching.