Styling a Call to Action Button

[00:00:00]
>> I'm going to go to this next part here creating a call to action button and making this responsive. Donald Miller, who works for a his own company, is called StoryBrand, he wrote a book called Building A Better StoryBrand. He has some really great pointers for great content and convincing people who visit your website to do whatever it is you want them to do, to buy something, to register for your newsletter, whatever it happens to be.

[00:00:25]
A big call to action in the navbar is one of the things that he recommends. And here inside of this navbar what is the big call to action? What do we really want someone visiting this website to do? We probably want them to take a look at your resume, right?

[00:00:40]
Because ultimately a portfolio is about getting hired. So we would like to highlight that resume button in some way and bring attention to it. And one way to do that is to turn it into a button. Now there are HTML button elements and there are link elements. That's the a tag, what's the difference between the two?

[00:01:02]
The actual HTML button element has to do with executing something. So in other words, it has JavaScript functionality generally associated with it, or it is what you click on when you submit a form. So it's not about a link, a link has to be when I click this thing, I go to another page, whether that's a page on my website or it's a page on another website, or even somewhere else on the same page.

[00:01:29]
That is the whole purpose of a link, a button is all about executing something, submit a form or open a modal window or whatever else you might be doing with buttons. There's a lot of things you can do. So the markup that we have this resume button is in fact correct, we don't want to change that to a HTML button element.

[00:01:52]
What we need to style our link such that it actually looks like a button, okay. So that is what we're going to try to do next. And the best way to do this, I think, you can certainly mess around with all kinds of funky CSS selectors, but what I'm going to do is I'm simply going to make a class and I'm going to put it inside of that Ref, an element itself.

[00:02:19]
I'm going to call it a class and I'm real creative. I'm going to call it button, class of button. Okay, so let's add that to our HTML and then we can style that. So here in my CSS, I'm going to call a class of, Button. And then we can start configuring things.

[00:02:43]
So as you know from our web page, that is a hot magenta or it's a magenta button. It's got that hot magenta color when we hover over. It's got some rounded colors it is the mono sort of font there's no underlying all of those things are really important to that particular button.

[00:03:02]
So let's go ahead and style that up accordingly then so it has a background hyphen color of var what, magenta. So there's that background color right off the bat, right? But that looks a little bit tight, so we probably wanna add some padding to that. So padding 0.5 rem, okay so that gives you a little bit of space between the text and the edges of your button and then all we need to do is round the corners, border radius.

[00:03:40]
Five pixels and so that of course is subject to your designer eye. If you think that the corner should be more rounded or if you think that there should be more padding or less padding, you can of course make all of those adjustments accordingly. But this is what looked good to me, so that's good.

[00:04:00]
That looks pretty good right there, well, we got a bit of a problem. When we roll our mouse over that button, the text disappears. That's because by default, our links are styled to be the color of this button. So we're gonna need to do something about that, right?

[00:04:15]
So let's write that style dot button cowen hover. We want the color to be white or var white. So when we roll our mouse over, we keep our text and we're gonna change our background color. To var, dot mag, there we go. So, now we have a really big call to action right there, on the button draws your attention very, clearly right to that button so, you can see what's happening there.