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

7.2 Spinning Buttons

Hello and welcome back. In this lesson, we're gonna create some simple button animations. So that when we hover over it we're gonna see these these little elements behind the buttons rotate out and they're gonna spin and move into place. So as you can see, we have two separate squares behind each of these buttons. And we don't see those squares until we hover over the button. One of them moves up into the left, one of them moves down into the right, and they both rotate as they move into place. So let's talk about how to create this. We're gonna start with a brand new CodePen here and stretch that out a little bit. And I'm gonna jump into my settings for this CodePen and on the CSS tab we're gonna come down here to this search field. And I'm gonna search for a library called font-awesome, which gives us access to some easy-to-use icons, we simply put those inside the eye element. So let's Save and Close that. And then let's enter in our HTML. Now I'm just gonna copy and paste this HTML, cuz it's pretty straightforward. We have a nav element with an id of main-menu and then we have four links inside that. And each of these links have an i element inside it. And the way we use these Font Awesome icons is we first give the i element a class of fa for Font Awesome. And then a more specific class to tell Font Awesome which particular icon we wanna use. So we have four different icons we're using here, we can see those on the screen. So that's all we really need for our HTML, everything else is gonna be done in our CSS. So let's open up our CSS here, and I wanna start by adding a little bit of padding to the top of our body element. Give it about 40 pixels just to push all of the content down a little bit. In fact, I'm just gonna add padding-top. And then for our main-menu, which is the nav element that contains all of our links. Let's point to main-menu here and let's do a few things here. First of all, I'm gonna set the display to flex just because flex box is really easy to use. And then I'm also going to set the justify-content property to center. So I will center all of those icons right in the middle. Then I want to add some styles to the anchor tags here. And I'm just gonna copy and paste these particular styles. They're all pretty straightforward, changing the background color, the font size, things like that. And I didn't mean to add that to the main-menu as a whole, I want to add that to the anchor tags within the main-menu. So I'll say main-menu space a, make sure we're pointing to those anchor tags. And there we go, now we have the basic look for our buttons. And then if you remembered whenever we hovered over our buttons, we saw a quick little animation. And we're gonna be using the CSS transition property in order to do that. And so I'm gonna put a CSS transition property on these anchor tags. And I'm going to transition all properties and I want the transition to take about a quarter of a second, so we'll set it to 0.25s. And so now any changes we make to any of the animatable properties in CSS, they will be made over the course of 0.25 seconds, they will animate into place. Now if you remember when we hovered over our buttons, we saw two different squares that were animating out and we're gonna be using the before and after pseudo class for these anchor tags in order to do that. So the way we do that is let's point to our main-menu. And we're gonna point to the anchor tags inside that main-menu and I wanna point to the before pseudo class. And the way we do that is we say a and then with no spaces, two colons, and then the word before. Now the easiest thing to forget when you're using these before and after pseudo classes is that we need this property called content, otherwise they won't work. Now usually for the content, you would put some kind of content inside of this and that's supposed to be inside quotes. So we put some kind of content inside of that and you can actually see that showing up here. However, we want this content to be empty. So we're just gonna put an empty string, so we have opening and closing single quotes, therefore, our content. Everything else we're going to build out with the CSS property. So we have the display property, we're gonna set it to block and we want to position this in the exact same location as the button itself. Now the button is if we scroll back up, it's 100 pixels tall, 100 pixels wide. And so we're gonna do some of the same things for this before pseudo class, we can set the width here to 100px and the height also to 100px. And then we're gonna give the before pseudo class a little bit of a different background color than the one we use for our main button. Let's give this a color of 387ca6. And we can see now that before pseudo class is covering up our button and we'll fix that in just a second. Now we've given it a display of block. I also wanna set the position to absolute. So we'll set the position here to absolute and in order for this to work right, the parent element which is the anchor tag itself needs to have a position of relative. And that's one of the properties that we copied in here. So you need to make sure you have that position of relative on the anchor tag and then on the before pseudo class of the anchor tag then we can position that element absolutely within that anchor tag. So here we're gonna set the top and left properties to 0 just so that they end up. I'm sorry, we had to do that right here, top = 0, and left = 0. So that it will end up in the same position in the top left corner of our button. So it's the same width, it's the same height, it's in the same location of our button. But now I want it to be behind the button. And the way we do that is we simply use the z-index and we're gonna set it to a value of -1. And that will set those behind the buttons. So then one more thing here is I wanna add a transition property, cuz we're also gonna be doing an animation on this. And again, we'll do all .25s. Now the after pseudo class, this is the before pseudo class for the links, the after one is gonna be very, very similar, almost identical. So we'll just copy that and paste it, and we're gonna change a couple of things. First of all, we're gonna change the background color for the after pseudo class. And if we temporarily get rid of that z-index, we can see that color or maybe not, it doesn't show up. We need to change this first of all to after. There we go, okay, so now we can see the background color of that after pseudo class this new brighter color. So let's put that z-index back except we're gonna change it to -2, we want it to show up behind the before pseudo class. So that z-index is -2, then we have our transition. And I think we're good to go there for the after pseudo element. So now in order to get this to work, we only have one thing left to do. Whenever we hover over these elements, we wanna see that before and after pseudo elements which are basically just squares that are hiding behind our buttons. We wanna see those squares rotate out and move into place. So the before is gonna move up into the left, the after is gonna move down and to the right. So let's see what that looks like. We're gonna point to main-menu:hover, and then, I'm sorry, wee need to do main-menu a:hover, it's when we have our over the anchor tags within that menu. And then, again, no spaces, and we'll type :: before. So what do we want this square to look like? What do we want it to do whenever we hover over our anchor tags? Well, we want to transform it and we're gonna rotate it 90 degrees. So 90deg, and then we're also gonna move it up into the left. So we're gonna set the top position to -5 pixels and the left position also to -5 pixels. So we'll just move it up into the left 5 pixels. And we're gonna do something very similar, for the after pseudo element. So we'll just paste that change before, to after. Instead of 90 degrees, we're gonna rotate it negative 90 degrees, so we're gonna rotate it in the opposite direction. And instead of moving it up and to the left, we're gonna move it down and to the right. So we're gonna change these negative 5s to positive 5s and that should get us where we're going. And since we're changing these properties here and we've set our transitions all to 0.25 seconds, we should see them rotate instead of just moving into place. And sure enough, when we hover over each of our buttons, we can see that working just fine. And if you wanna test those one at a time, we can come in and just delete one of them, and then do our hover and we can see that first one working. And then if we undo that, bring it back that we can see both of them working at the same time. So that's how you can create a very simple yet very eye catching animation for your buttons using the before and after pseudo classes. Thank you for watching, and I'll see you in the next lesson.

Back to the top