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.2 Simple Button Fades

Hello, and welcome back to practical web animation. Now that we've gotten most of our styling done, let's move forward and start animating these. But before we do, I want to put a couple more finishing touches on our styles. First of all, there's a little too much space in between these, so I want to bring these buttons a little closer together. But before we do, let's go ahead and fork a new version. We're starting where we left off in the last lesson. But just in case you weren't following along with your own code and you want to start following along now, then the starting pen for this particular lesson will be in your course notes for this lesson. So once you open that up, let's go ahead and click on the Fork button to create a new copy of it, and then we can start making changes in our new copy. So again, I want to reduce the space in between, so remember we use the margin-right property to put spacing between our list items. And then for our last list item, we're gonna get rid of that margin-right, and we'll explain why in just a moment. But for now, let's set this margin-right to a value of 4px and now they're a lot closer together. So now I want to center this navigation on the stage, and by default and an unordered list is a block level element. And the easiest way to center a block level element is using margin 0 auto. So our unordered list has a class of main-nav. So it's this rule right here that we're gonna be editing. So we're gonna go into that rule and set our margins to 0 space auto. Now it's not gonna work, because since it is a block level element, by default it takes up the full width of the browser or the full width of whatever its container is. So in order to center it using margin: 0 auto, we first need to give it a width. And I want its width to be determined by the number of items here in the amount of space that those items take up. Well, each of these items, if we go down to our anchor tag rule here, has a width of 140 pixels. And then we have a margin-right on each of those list items of 4px. So we have five buttons here. 5 times 140 is gonna be 700, so we have 700 pixels plus the spacing in between those. So we have one, two, three, four spaces in between. And each of those takes up 4 pixels of space, so that's another 16 pixels. So our total width of this unordered list is 716 pixels, which isn't quite gonna work yet, but let's go ahead and type it in. We'll do width: 716px. Now the reason that doesn't work, you'll see that it does center things, but the Contact Us button has been nudged down to the next line. And the reason for that is because the Contact Us button also has a margin right of 4 pixels, so it's that fifth margin-right that makes it wider than 716 pixels. So we could fix it by setting our width to 720, but then it's not perfectly centered because we have 4 extra pixels of margin over here on the right. So there are a couple of ways we could fix this. We could fix it by setting our margin left and right for each of our buttons to 2 pixels. That way there would still be 4 pixels of padding in between and it would stay centered because we would have 2 extra pixels on the left and on the right, so it would stay centered. Another option is to simply get rid of the margin-right for the last list item, and that's the way we're gonna handle it in this lesson. So we don't really need our JavaScript window here. I'm just gonna hit the X over here to collapse that, cuz we really only need HTML and CSS for this lesson. So for our list items here, we have our margin-right set to 4, but then we're going to create a new rule for .main-nav li:last-child. So for the very last list item in this list, we want to set the margin-right property to 0. And when we do that, everything works fine. And then we can go back down to 716 pixels now, and we see that our Contact Us button is not breaking down to the next line, and that gets us where we need to be. Now one thing I do wanna do is to space it down a little bit so it's not so close to the top of the browser window. So instead of margin: 0 auto we could do margin: 20px auto. That will give it a margin of 20 pixels on the top and on the bottom, and then the auto obviously would center it horizontally. So now let's create our hover effect. So our anchor tag right now here doesn't have a background color applied to it at all. It's the list item that has the background color. So let's actually grab that background color, cut it, and then move it down to our anchor tag itself. There we go. So now our anchor tags have that background color. And then we'll create a new rule for the hover effect for those anchor tags, so main-nav li a:hover. So for our hover effect, we're gonna set our background color to the same value as the background color for our site, which is 349, if I remember correctly. And let's hover over those buttons. Yeah, there we go. So when we hover over the buttons the background just disappears. Now in order to make this a little more eye-catching, we're gonna add a subtle little fade here. We're gonna fade it out instead of just making it disappear. And when we're going to fade an item, we need to first of all determine which rule we need to apply this transition property to. We're not going to apply it to the hover rule. We're going to apply it to the initial or the original rule for the anchor tags inside that main-nav. So for that original rule we're gonna set our transition property equal to all so that any property we decide to animate will go ahead and animate. And we're gonna make it last half a second, so .5s and then a semicolon to end. So now when we hover over each of these buttons, we have a nice little subtle fade-out, and that makes it a lot more interesting than when it just suddenly disappears, and I like the way that looks. And you can play around with that number a little bit. If you want it to go quicker, you could bring it down to 0.25 seconds or something like that. If you want to take longer, you can bring it up to 1 or 2 seconds. But that's our first initial fading animation. Let's go ahead and tweak this a little bit so that we're fading two different things at the same time. So let's save that and use that as a starting point for our next fork. Since you've been following along like a good student, you've already typed in all of this code for yourself. So go ahead and save your version of this pen and go ahead and fork a new version. So we're creating a fork off of our original fork. And there we go. So now what I want to do is I want to take away the background color altogether and put a border around it. So let's go into our anchor tag here, and first of all let's get rid of the background color for, actually, you know what, let's leave that alone for now. We'll worry about that in a second. So for our original anchor tag rule here, we're going to get rid of our background color. We're just gonna get rid of that altogether. And instead of having a background color, we're going to have a border. So we're gonna set our border to 1px solid white. And you'll notice that everything breaks again. Our Contact Us button jumps down to the next line. And the reason for that is whenever you add a border to an item that already has a defined width, that border is going to make that item larger. So our width here is set to 140px, but then we have 1px of border on the left and 1px of border on the right. So the full width of each of these is now one 142px. So that's the default behavior. Now there is a property called box sizing that allows us to change that default behavior. If we change box sizing to border box, then the final width of our item will be whatever we defined for it. So if we define a width of 146 pixels and then add borders to it, those borders will show up inside the item, and the final width of the item will still be 140 pixels. So I'm gonna set everything to a box sizing value of border-box. And when we do that, you'll see that it automatically gets fixed. And now what I want to do is when we hover over these anchor tags, I want the border, or I'm sorry, I want the border to stay the same. I'm not gonna mess with the border at all. I want the background color to change to white and I want the text to change to blue. So we're gonna leave our transition property alone here. And instead of setting our background color now to the color of our body background, we're gonna set it to a value of white. So now when we hover over, the background color goes to white and now we just wanna change the color of the text as well. So we're gonna set the color property to a value of 349, which is the same blue as our background. So now when we hover over those, it basically just inverts itself. So the text which was white is now the same blue as the background, and the background which was blue has changed to white. So let's save our pens and we'll move on with the next lesson. Thank you for watching.

Back to the top