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.9 Expanding Buttons

Hello and welcome back to practical web animation. In this lesson we're going to pick up where we left off in the last lesson. We've got our initial button states created and styled And as a quick reminder if we were to take off this overflow hidden here we can see how we've positioned our texts. So our text is available to us it's just kind of invisible right now it's off to the side. And the reason we can't see it is because we've set the overflow of the button itself to hidden, so anything that goes outside of that button we're not gonna be able to see it. And as we can see, the span with a class of BTN text that says submit, this is inside our button. So since we gave that button an overflow of hidden anything inside that button that spills outside will be invisible. So let's undo that. We'll put it back where it was. And eventually we'll be animating that text into that position Where it is right now but for now we'll just leave it as is. So let's get started with our first button this one on the top, which has a class of btn-stretch. Now again remember they both have a class of btn which is how we're able to apply some styles to it that apply to both buttons but but now I want to focus on the BTN stretch. So for BTN class here. I want to go ahead and add a transition property so that anything that we do on hover for either of these buttons it will be animated instead of just suddenly popping into place. So for our BTN class will go ahead and add a transition. Actually before we do that we need to make sure we fork this pen. So the starting pen for this lesson will be in your course notes. Once you open that up let's click on fork to create a new copy of it and we'll get started in the new copy. So again for the B.T.N. class we're going to go down to the very bottom of that rule and we'll add a transition property and we're going to set all to half a second so point five S. Now starting out for this stretch button here, we're just going to animate the width of the item. So let's come down here to the very bottom, skip a couple of lines and create a new rule for BTN hyphens stretch, but we're gonna be doing this for the hover events, so we're gonna type colon hover And then in the curly brackets there we're going to set the width, of our button to, let's try 200px. So now when we have over there button should see the with animator, and it does, it looks nice, and you can see the text appears, but it's no longer outside the boundaries of those buttons. So that looks pretty good but we can do a little bit more with it. Lets say for example these buttons were not center aligned. Right now it's expanding out in both directions because they're aligned to the center. We set the Margin property if we come back up here for the button rule itself we set our margin to 20 pixel space auto and that auto is going to automatically center it. So instead of doing that Let's just give it a margin of twenty pixels. That way they're left aligned, and now when we hover over it, you can see it's just expanding out in one direction. So I want to add a little bit more motion to this. Instead of just expanding outwards. I want the text itself to animate on, as well. So for this text here, this submit text, this is where I want the text to end up. But I want it to start off a little bit higher, and I want it to start off invisible. So it's gonna fade in as it animates downward, as the button is animating outward, as it's Expanding its width. So remember this submit text is inside a separate span with a class of btn text. So let's scroll down a little bit and here's our btn text but we're going to be animating our text differently for these two buttons so let's specify for this first one this is gonna be BTN stretch space BTN text. For now I'm going to make another copy of that and we're just going to call this second one BTN spin space BTN text. But we'll change some of these values later. For now let's focus on BTN stretch. So again right now we have it where we wanted to end up but where do we want to start. We want it to start up higher So I'm going to give our top position here. Let's give that a position of zero and if it's zero we don't need the P.X. at the end. Let's just see where that has us. Has up a little bit higher. Let's bring it up even higher than that maybe negative ten pixels. So now we hover over And that's a good starting point. So not only is it gonna be at negative ten pixels but we also want to be invisible so we're gonna set our opacity here to zero. Now we've created the transition property for the button itself and that allows us to animate its width but we also need to add a transition property To this text. Now for the text, I want there to be a slight delay, and and we'll get to that in a moment, but for now we'll just set it the same as we did everything else. We'll do transition all point five seconds and we'll get to the delay soon. But we want to last half a second and when we hover over that button we want the button stretch text to animate downwards back to a position a top position of twenty pixels And to an opacity excuse me of one. So let's scroll down to the bottom and let's create a new rule for BT in hyphen stretch colon hover we got to spill that right hover space .btntext. So when we hover over the stretch button. We want the B.T.N. text to animate on. So we're going to set the top position here back to twenty pixels and we're going to set the opacity to one. So let's hover over our button now And there we go. So we see our text animating down as our button animates out and that looks good, but now I want to add a little bit of a delay because right now everything's happening all at the same time. And I think we can make it a little bit more interesting just by adding a slight delay to that animation and it's going to be a very slight delay. We're going to come back up here and the way we add a delay before the animation starts as we simply add another value after our point five seconds. So we're going to say space and then this delay is just going to be point one five seconds. A very very short delay before that animation comes in and so let's hover over that And there we go. So that gives us just enough time to make that animation a little bit more interesting. So let's do something similar with our bottom button. The first thing I want to do is I want to animate out the width, just like we did with our first one, but I also want to animate the border radius so that it's no longer Perfectly rounded on the ends. Instead, I want to bring that border radius down so that it's just slightly rounded by the time it animates out. So this is gonna be our button's spin. Let's scroll down a little bit, and skip a couple lines, and let's create a new rule for dot BTN hyphen spin colon hover. When that animates out, we want the width for it to be two hundred pixels as well but I also want to animate the border Radius down to a value of about four pixels. So now when we have a hover over that button, you'll see that not only is it growing in width but the border radius is also animating, that was really nice. So then we can just add another animation to our text. For our text here let's bring it in from the left instead of from the top. So we're gonna skip a couple lines and we'll do btn-spin:hover btn-text. just like we've done before. In here we want the top position actually we're not animating the top one here. Here we're animating the left position. And remember in this rule here we already have it where we want to end up. We want it to end up at a left position of 75 pixels. So let's copy that and less just paste it here. So it's gonna end up at 75 pixels and we're also gonna animate on the opacity so we'll set the opacity to 1 on the hover. And then we'll scroll back up to the original btn-spin -btn-text rule, and here we're gonna set our left position to, maybe negative 10px, and we're gonna set the opacity, to zero, then we need to add a transition to this as well, and I'm gonna give it the same delays. So we're going to transition all properties point five seconds with a delay of point one five seconds. So now we have are over that and we see that there's a slight delay with that text animation as well and that looks really good but there's one more thing I want to do to this bottom button just to make it a little bit more interesting. I want to spin this icon around and make it disappear. So we're basically going to rotate it as we hover over it and then fade it out. So we're going to point to this icon class inside the btn-spin. And I don't believe we've. Here we created a The rule for btn and btn icon we're not animating the icon for the first one, but we can go ahead and put the transition property here. And for this transition we're gonna do all and let's make this a quick 1.25 seconds. Just a quarter of a second. So now let's scroll back down to the bottom for btn-spin, skip a couple lines and we'll do btn-spin:hover .icon. We're gonna point to that icon class and that should affect the icon inside it. So here we're gonna to set the transform property To rotate, and then inside parentheses here with type 180 deg for degrees. And let's see how that looks. So let's hover over it, and we see that it doesn't rotate. And the reason for that Is the class name is actually btn icon not just icon. So let's make sure we get that right and then let's hover over and there we go. We see it spins around as everything animates out and now as it's spinning around let's also make it disappear. So we're gonna set our opacity it here to zero. And the one we have over it disappears but our text no longer looks right. If we're gonna do this we want that text to be centered. So we need to come back to our btn-spin;hover rule. So here we're setting our left position to 75 pixels. Instead of doing that we're going to set it to fifty percent. And when we do that you'll see that it comes over too far as well because the left edge is set to fifty percent. Well this is where it's going to get a little trickier because we don't necessarily know how wide this text is going to be in order to be able to center it. So what I want to do is I want to make the the text field, the span here that holds the text, I want to make it as wide as the button itself. So that way we can just center the text inside it and get it where we want it to be. So let's scroll up and look for our B.T.N. spin text. Here it is. So here's the rule for the btn-text property, or class inside the btn-spin button. And we set the position to absolute, left to -10, top to 20. We're gonna change this a little bit. Remember, our buttons Have a width and height of 70 pixels initially. So we're gonna set the height of this BT and spin and since we since it has a position of absolute we can set its height. We're gonna set its height. To 70 pixels, and we're gonna set its width to 200 pixels, because 200 pixels is the final width whenever we hover over it and stretch it out. So then for our left and top positions, we're just gonna set those to Zero zero and it's going to throw off the positioning for a moment but we can go in and fix that now. So we also need to set the line height here because the text needs to be vertically centered. So we're going to set the line height equal to our height, which is 70 pixels, so that should vertically center it, and we can see that it does So now for our left position let's initially set it to -50%. And then when we animate it on let's set it to a left Value, let's find it first. So here's our btn-text. We're gonna set it to a left value of zero because it's now as wide and tall as the button itself. So if we set it to zero it should be perfectly centered and when we hover over it We see that it is and that's the effect that we're going for. So as you can see going to play around with any of these CSS rules to get the effect that you're going for ,and depending on the specific effect you might have to tweak things a little bit as we saw here with the second button, but you get the basic idea you can create some really nice Less obvious effects here that are still nice and subtle but bring the eye to the button and give you something that your users don't usually see. So thank you for watching and I'll see you in the next lesson.

Back to the top