Creating button animations - CSS Tutorial

- [Narrator] Okay, now we're going to get into learning how to create our own animations, and we're going to start with buttons. Buttons are all over websites. They're everywhere on the web and you'll see all different kinds of animations applied to buttons, and this will vary depending on the kind of branding a website has. Sometimes a website will have something a little bit more fancy, something a little plainer, and you can really depict that for a brand depending on the animations you add to a button. So first, we're going to look at how to create animation where it's sliding in, so we have this element kind of looking like it's sliding in on the button. Then we have one where it's almost dropping down as well, and these are a little bit more playful, maybe a little bit fancier buttons. And then I also want to show you a more typical button that you'll see on the web. So something that's going to be on a lot of websites. When you hover over the button, you'll see it kind of go up a little, scaling a little, and our color is changing as well. For this course, all of our animations are going to be on GitHub and you can go to the CSS enhancing interfaces with animation on LinkedIn Learning. When you go down, you'll see this main branch and it doesn't have any code in it, but that is what you want to grab, so you'll grab this. You'll want to use git clone and make sure that you clone this code from this repository right here, and you can just copy it here. Once your project is actually cloned, you can open it in your favorite text editor. Here, I have VS Code open, that's just one I like to use. And what I'm going to do is I'm going to check out the correct branch, so each of our animations has a starting and an ending state. So the beginning will be code that you can work with, and then the end code will be what you can actually check out to make sure that you're doing everything right. You can also see that in GitHub right here, we have the different branches, so you know which branch you want to check out. And we're going to start with zero three, zero one B. I'm just using the terminal that's here in VS Code, but you can use whatever terminal you like to use. And I'm going to say, git checkout zero three, zero one B, so our beginning branch. Then we should have a folder called begin, and inside there, we'll have a button dot CSS and a button dot HTML. Our button dot HTML is pretty simple, it has a body, three different sections, and three different buttons. Each button has the same class called button. That's why they all have the same style, that kind of reddish button with the black text at the beginning. And then they each have their own class, so button one, button two, and button three, and that's what we're going to use to style the differences in the three different buttons we have. In our button dot CSS here, we have some boilerplate code that I put in so that you didn't have to spend your time on that cause we want to focus on the animations. But going over a little bit, what we have, we have the CSS reset that will be in all of our animation files, and it's just taking off some of the browser defaults that you get on a website. So taking off some of the default margin and padding, adjusting the font size so that I can use REMS, which I like to use, and then centering things with display flex on the body. And then we can talk a little bit about the button base here. So each button is going to have the same, what's called the button base up here. They all have this button class. They have a position relative, which is going to become important in a minute when you see me creating the other elements for the different buttons. They all have the same background color, which we got off of a website called BinaryView. They all have the same color. We got rid of the default border you get with buttons, and then just some extra stuff here that's not too important. Just kind of styling how I wanted the buttons to look. Another important thing here though is overflow hidden. We will take this off in a moment once we start creating elements so that you can see why we have that. And then also transition, and our transition property here will take that animation that we're applying and transition it over 0.3 seconds so that it's not happening automatically. So let's start with our first button animation. What we need to do first is, we saw this kind of element almost moving in from the side when I first showed you the animation, and what that is, it's going to be a pseudo-element. Pseudo-elements are not elements that are actually in the DOM, but they're elements that you can create and then mess around with if you want, and they're built off of whatever element you're using. So. I'm going to do dot button one, which was that class on our first button, and then, I'm going to say, before. This starts setting up our pseudo-element, it's going to be a before. You can also use an after. To be able to see a pseudo-element, you have to give it this content property. If it doesn't have this, it won't show up and you can just leave it empty. If for some reason, maybe you wanted other texts or something else there, emojis, sometimes people add, you could put something inside here, but for now, we're just going to leave it empty. Then, I'm going to give this pseudo-element a position absolute. Now because our button base had position relative, this pseudo-element is now positioned absolute relative to that button. So, instead of the section tag that we have in our HTML, it's now positioned absolute relative to the button, which is important. Now we're going to say left zero, top zero, this is just positioning our button now that we said it's a position absolute. We want to give it a background color because the color is going to be different than the regular red color we had initially, and it's this yellow color that you see throughout BinaryView as well. Now, I want to give it a height and a width, and they're going to be 100 percent, and that will be 100 percent of the button container that it's in, so the actual button, okay? And then, the next property I'm using is called z-index, and this is important. Our pseudo-element is going to be behind our buttons, so we're going to say negative one. We don't want it to show up unless we animate it in. When we do this, instead of having it on top, if we were to have it on top and it slid in, it would cover up the text that's on the normal button base so that initial text that we had on there would get covered up when this element came in, so we're giving it a z-index of negative one. Then I want to use a property called transform-origin. And what this does is it decides where you're going to transform that rotate, or when you scale where's that happening on this element. And instead of it being in the center, we want it to come from the bottom left so that the element comes in from the left in the bottom. And then we're going to say transform, and we want to translate X negative 20 REM. I'm going to show you what this looks like in a minute when we take off that overflow hidden property, and we need to make sure this is transform, here we go. And then the last thing I'm going to do is I am going to add a transition property also on the pseudo-element. That way it also animates in smoothly and animates out smoothly as well. I'm going to say transform because the transition that we are doing is on this transform right here, and then, over 0.5 seconds. So we won't have an animation yet, we haven't actually added the animation, but I want to show you what this looks like with the overflow hidden taken off. So inside my button dot HTML, I'm going to use something called Live Server. You can open up your HTML, however, you normally do that, but I'm using a little plugin called Live Server that you can get on VS Code. Okay, now, we have our button here. We can't see that pseudo-element we created. I'm going to inspect and dropping some of these down. I want to click on my button. I want to go to the styles here, and I want to take off that overflow hidden, there we go. So now we can see the element we created. It's the same size as the button, it's a different color now, it's moved over negative 20 REM, which is about 200 pixels. And it's also got a z-index of negative one. If it didn't, it would be on top of this button. All right, the reason we can't see it when we have the overflow hidden is because it is positioned absolute relative to that button, so the overflow from the button is hidden and we want that initially. Okay, the next thing we need to do is actually add our animation. So we're going to be adding an animation both to the just dot button class, dot button one class, and then also to the pseudo-element. So first I'll do dot button one, and then, we want to do this on hover. So we want the animation to happen on hover so you can use this pseudo property here. And what happens is we just change the color of the text to white. And then, the important part here is we want to change the background color and we want to change it to transparent, and we have we do that because we have that negative one z-index on the pseudo-element. So to actually be able to see it and not have it blocking, we have to make the background color on our button transparent. But we'll be able to still see our text because the pseudo-element is behind the button. Okay, the next thing we want to add is the dot button one class again, and then, hover, and then, before. And I know this looks weird, like you would maybe guess that you should do a dot button one, before, and then hover, but with CSS, you actually put the hover first, and then the before, if you want it to be applied to your pseudo-element. And what I want to do is I just want to transform this translate X, just on that x-axis that's going left and right, instead of up and down, and I want to bring it back to zero. Up here, we have it translated on the x-axis over negative 20 REM, and now we want to bring it back to zero. Let's save this file and see what it looks like now. So when I hover over my button, we're seeing our element, which is around here, is sliding in. It looks like it's sliding in because the color on the button is fading out to transparent. We're getting that element moving from over negative 220 REM to zero. Okay, great, now that we have our first animation, we can start working on the second. This is going to be very similar, but we're going to make an element that drops down from the top, instead of something coming in from the side. Going back to our CSS here, we can start adding another pseudo-element. So we need a pseudo-element for our dot button two, and we will use a before again. I'm going to give it that content and leave it empty. A lot of these first couple of properties will look the same, so we're going to go through them kind of quickly. We want to do position absolute again, so it's positioned absolutely relative to the button. Say left zero, top zero, and then, we want to give it a height and width of 100 percent. A background color and we will use that same yellow color. A z-index of negative one so that it's dropping behind our button so we still see our text. Then I want to transform, and this time, since we're coming from the top and dropping in, we want to translate on the y-axis. And I'm going to say negative 100 percent, and we'll look at where that is in just a moment when we take off the overflow hidden again. And then, I will transition this property as well, and we can either say all, or you can say transform because that's what we're transitioning. And this one is going to go a little bit faster, so I'm going to do 0.2 seconds. This is something I just played around with and you'll get a feel for it too, as you start doing animations, and I typically use ease-out. We're going to save this file, and then, we're going to do the overflow hidden again. I'm going to click on my button again, and then, I want to take off that overflow hidden, and I'm going to see I have my one element from our first button here, which has the animation applied. And then I have my new element, which is sitting right on top of this button. This is also why we do it a little bit faster so it drops down pretty quickly right here. Okay, so let's apply the actual animations now. Again, we're going to do the two different animations, so, we want to do dot button two, and then, hover, and like before, we're going to want to change the text color to white. You can do background color to transparent. Next, we want to do dot button two, hover, and then before. Something to note is when you're using these pseudo-elements, you'll also sometimes see it like this with two colons. You can do either way now. So you'll see it both ways, you can use either way, one colon or two. Okay, and we want to transform, translate, and thinking again, what we did before, we translated on the y-axis and we had gone up to negative 100 percent, so now we want to go back to zero. Now, when we look at our buttons, we have the one coming in from the side, and then we have one dropping down as well. This is a little bit slower animation, this one is happening a lot faster. Now, we're going to work on our final animation, and this one does not need a pseudo-element. Because we are just changing some properties on the actual button here, we're just going to do dot button three, and then hover, and then we're going to think about what we want to do with this button. So when I hovered over the button, which you see a lot on a website, it grew just a tiny bit, but it also moved a little as well. So we're going to transform and with transform property, you can actually put several different transforms if you want. You don't have to just have the one like we've been doing here, translate Y. So first I'm going to do translate Y, and we're going to go up just a little bit, negative two pixels. You do not have to go up very much to actually make this look good. And then, we're also going to add in scale. And once again, we're just bumping it up a tiny bit, so we're going to say 1.1. And then, we want the background to be that yellow color, and we can keep this as background color to keep everything consistent. And then the color of our text will be white. So again, this is just applying to that actual button three-class, instead of creating a pseudo-element. We don't need to do that this time. So let's go in here, and we should see our button growing just tiny bit and actually bumping up a little as well. Our color changes, and so does our background. So now, we have three different animations, and the nice thing about this is now that you know how to do one of these animations, you can switch it up and do several. So, instead of having something coming from one side, you could switch it up to the other side. You could have something dropping from the bottom so that it comes in, instead of dropping down from the top. You could also use that skew property and you could change where this is actually coming in from, so it could come maybe in from the side, instead up here at the tip. And then with this button, you could maybe instead of increasing its size, make it go down a little so it looks like the user is following along with a button as it shrinks down. You can play around and have fun with this, and you can create all kinds of animations just from the few that you've just learned right now. If at any point you got lost or confused or not sure if you have the right code, maybe something's not looking right, you can always go back to your terminal and hit git, checkout, and then you're going to want to check out zero three, zero one E. And this will take you to a folder called end, and this will have the finished code in it as well. So this will be everything that if you missed anything at all, you should be able to go through and check your code against the ending code and make sure that you have everything correct.