7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.8 Setting Up Your Buttons

Hello and welcome back to Practical Web Animation. In this lesson, we're gonna create some expanding buttons, and they're gonna do quite a bit when we hover over them. Initially, I want to see just the arrow and the button border around it. And then when we hover over it, I want these buttons to expand out and reveal the text. And there are gonna be slight variations in the two buttons just because I want to give you a few different ideas that you can play around with. Now as far as the HTML goes, as you can see here, these two are very similar, the only difference between these two buttons is this second class on the button itself. So both of them have a class of BTN so that we can style them both using one rule, but then we also have a class of BTN stretch on the first one. And BTN spin on the second one so that we can apply some slightly different rules, as well. So inside each of these buttons, as you can see, we have an eye element with some Font Awesome icons in them, or a single Font Awesome icon, this right arrow here. And then you'll also notice in our CSS that we're using this Josefin Sans again which we got from Google Fonts. So if we go to our settings, you can see in our CSS tab here that Font Awesome and that Josefin Sans font are both included here. So let's get started applying some basic styles to our buttons just to make them look a little nicer. Right now, it's just kind of the default browser button here. So I'm going to point to that BTN class because we're gonna style both of these very similarly. So this BTN class will refer to both of these buttons. They already have font family of Josefin Sans applied to them. I am gonna increase the font size though, we'll bring that up to about 30 pixels and that gives us a nice large font to work with. Also wanna make that font color a little bit lighter. We're gonna do #bbb for a light grey color, and as you can see, that applies to both the text itself and the Font Awesome icon. Because remember, those Font Awesome icons are a font, so not only do they scale up and down seamlessly and smoothly, you can also change their color using the color property in CSS. Another thing I always like to do with my buttons is you'll notice when we hover over them, it doesn't really look like they're buttons, so we're gonna change the cursor to a pointer. So now when we have are over those, we'll get that pointer cursor. I also want to set a solid background color, right now you can see there's a little bit of a gradient there, but we can override that just by giving it a background color. I'm gonna give it a black background color, excuse me, of white. And then I want to simplify the border a little bit because that looks terrible. So we're gonna set our border to 1px solid, and we're gonna to do a light like grey, #ddd. And that lightens up the border quite a bit. And then they wanna put a little bit of a box a shadow behind it. Nothing too fancy, just a little bit, so we'll do a box-shadow property. I'm gonna align it at 0 0 so it's not gonna be offset at all, it's gonna be directly behind the buttons themselves, but I do want to give it a spread of 3px. And then for the color on that box shadow, we'll give it an rgb value of 220, 220 and 220. So it's a very very light grey, just barely visible, but it gives it a little bit of extra added interest. Now another thing I wanna do that's gonna be similar for both of these buttons is we're going to give them a width and height. And I'm gonna set that to 70px for both of those. And don't worry about what the text is doing right now, we'll address that in just a moment. For now, I'm just gonna set the width and height to 70px and I'm also gonna set the border radius to 70px. When we make that border radius as large as the width and height, then you'll notice that we come up with a perfect circle here. So now is when things are gonna get a little bit tricky because I want to make sure that the arrow is in the middle of this circle, and that the text is off to the right of the arrow. We don't want to see that text yet. So one thing I want to do with this arrow is I want to wrap it in another div and specify a width and height for it. This is gonna be the same as the width the height of the circle itself, and then we're gonna center this arrow inside that circle. And let's do that in our HTML, just before that i element. I'm gonna create a new div and I'm gonna give it a class of btn-icon. And then we'll nudge that over, and then after the closing i tag, we'll put our closing div tag. And so that wraps it in a div and you'll notice that this button text is separate from that div, it's outside that div. So now we're gonna jump into this div, which again has a class of btn-icon. So let's skip a couple lines here and I want this to be the same for both of these. They're gonna look identical initially. So we're gonna point to both of our btns, using that btn class, space, btn-icon. And in order for that to work, we also need to add that button icon div here as well. So div class equals btn-icon, and then after our closing i tag, we have our closing div tag, okay? So for that btn-icon, again, like I mentioned, we're gonna give it a width and a height to match the size of our button, so 70px by 70px. And you'll see that already nudges the submit text outside of the button, which is kind of what we want. And in a moment, we're gonna reposition that submit text as well. But for now, at least that gets it outside of the button. Another thing I wanna make sure that I do here is I want to set our text-align to center, and that looks like it's already doing that but just to make sure, we'll keep it there. And then, I'm gonna add a line height property to vertically center our arrows here, so we're gonna set our line-height to 70px as well and there you go. We can see that centers our arrow. Now as you can see, it doesn't look perfectly centered, it's a little off and that's because buttons, by default, will have a little bit of padding in them. So we're gonna go back up to our button class here, or we could even go up to our button itself, depending on if you have other buttons on your page that you wanna take padding away from. Just to be safe, I'll put it in this specific button class. So we'll come down here under border-radius and set our padding to 0. And there we go, that gets our arrow centered where we need it to be. So remember this submit text here is still inside that button element. And now that I see that, I wanna get rid of this outline. So I want to make sure that btn:focus. We're gonna point to that rule and we're gonna set our outline to none and that should take care that, there we go. Now we can click on it, we don't get that blue outline around it. So I want to move our submit text. So remember this text itself is still inside the button, it's just outside that btn icon div that's containing our arrow. So keeping in mind that this is inside the button, I want to reposition that text a little bit, and we're gonna point to this btn-text class and we'll come down here. Skip a couple lines, point to .btn space, and then we're looking for the btn-text class inside that btn class. And for that text, I'm gonna set the position to absolute so we can put it exactly where we want. Now again, you'll notice if we set the left position to 0, it's gonna throw it all the way to the left side of the stage because our parent item, this button doesn't have a position attribute set to it. So we need to point to our buttons here, and we're gonna give those a position of relative, and that should take care of the positioning issue there. And so just to play around with the numbers here, we can set our top to 0, just to see initially where that gets everything. And then we can start fine tuning it by playing with these numbers. So if I set this top number to, let's try 20px, that brings it down to about there. And I'll set the left to, remember these buttons are 70px wide. So let's try setting our left position to about 75px. And that looks pretty good. Now what's gonna happen here is this button is going to expand out. We're not gonna see this submit text initially. But when we hover over the button, the width that button is going to expand out and then the submit text on this first one is gonna drop down from above. So this is 75px here is really kind of the ending location of this submit text, and I like to figure that out first. I like to figure out where it's gonna end up before I put it in place up here above. So again, I want this text to be up above the button. But for now, we're gonna leave it at 75px. And then, before we move on with the next lesson where we'll actually make these animations work. I wanna do one last thing here to complete the initial look of our buttons, and that is to hide anything outside the buttons. And the way we're gonna do that is we're gonna go to our button class again, our btn class, and we're gonna set an overflow property equal to hidden. And now the submit text disappears and we've got two buttons hovering in the middle of the stage. So in the next lesson, we'll jump into some hover effects that are going to animate our buttons in a couple of slightly different ways. So make sure that your pen is saved and in the next lesson, we'll pick up where we left off. Thank you for watching and I'll see you then.

Back to the top