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

Cancel
  • Overview
  • Transcript

7.3 Submit Button Animation

In this lesson, you will create a submit button that performs a CSS transition animation and a keyframe animation when clicked. It uses a little bit of jQuery to change the class on the button when it’s submitted—you’ll love the overall effect!

Useful Resources

7.3 Submit Button Animation

Hello and welcome back. In this lesson, we're gonna create an animated submit button. So that when we click on it we're gonna see it changes shape and size and then we're gonna see a little spinning animation after it shrinks down to the size that we're looking for. So let's start just by creating a simple button here. I'm gonna give it an id of btn-submit. And I will just put the text inside the button, Submit, and we'll close that off. All right, that's all we need for our HTML. Pretty impressive, right? All right, so everything else for the most part, we're gonna have a little bit of JavaScript, but most of everything else is gonna be inside our CSS. Before our JavaScript, I wanna keep it pretty simple and quick. So we're going to use jQuery. So enter settings, we'll jump over to JavaScript. I'll do a search here for jQuery, make sure that that's added here, and we'll Save and Close. All right, so let's jump into our CSS, and I'm gonna bring in some basic styles here for the body and the font family, things like that. And then we're gonna create a rule for our submit button, which we, again, gave an id of btn-submit. So there are a number of properties I want to copy in to this rule here and that gives us the look that we're going for. You can see we've gotten rid of the default outline that's there, we added a width and height. A few other basic, you'll notice we're using a box-shadow for the border. You'll notice we set the border to 0, so the box-shadow is completely acting as our border. You'll notice that that box-shadow is inset. We've set it to 0, 0, which means that it's not gonna be moved to the right, it's not gonna be moved down at all. It's gonna stay right on top of the button itself. And it's not going to spread at all, this third number is the spread, so it's not gonna be diffuse, instead it's gonna be a solid line. And then this is the thickness, it's a three pixel line. So again, I'll explain more about that in a moment. I've set the border radius to 40 and that's completely enough to round off the edges of our button. And you can see a couple of other items here. The only one I really wanna point out in addition to that is the the position relative. Again, we're gonna be using the before pseudo class to create part of this animation. It's gonna be different than the last button we created using before and after but we are gonna be using the before pseudo class. And we wanna place that before button right on top, or I'm sorry, we wanna place that before pseudo element right on top of the button itself. So we're setting the position of the button to relative and the position of the before pseudo element to absolute. And that will get us the effect that were are going for. I also wanna add a little bit of a hover effect to our submit button. Nothing fancy here, we're gonna keep it pretty simple. Here we'll just change the color of our text to a value of 686, and there we go. So what I wanna do with this button is when we click on it I want the Submit text to disappear. I want the width of the button to basically collapse in so that it's just a circle. So we're gonna see a circle with a gray border around it. And then on top of that circle, we're gonna see what looks like part of an outline kind of arc within that circle. It’s gonna be rotating around and it’s just gonna loop around until your next page loads and your page moves on. So really, we're just gonna have a looping animation after the initial animation of the button changing its size. So we've actually got two things going on here. First of all, we're changing the button size, we're gonna do that using a transition. And then after that button changes its size, we're also going to play a looping animation of the before element. So let's create this before pseudo element and we're gonna see what that's going to look like. So, btn-submit:: before again, don't forget your content property here, just set it to an empty string. As always, that's easy to forget, we need to set the position to absolute so that we can set it right on top of the first element. And you'll notice that the button itself is 50 pixels tall. When we get done changing the size of that button, it's only gonna be 50 pixels wide as well. Right now it's 200 pixels wide, we're gonna bring it down to 50 pixels wide so it's gonna be a circle 50 by 50 pixels. And that's what this submit button or this before pseudo class is going to be the pseudo element. So we're gonna set its width to 50 pixels and its height to 50 pixels. Again, this will perfectly match the width and height of the button itself after the button size animates. Then for our pseudo class here, pseudo element, we're gonna set a border. Here we're using an actual border instead of a box-shadow, but it's gonna match the size of that box shadow. So it's gonna be 3 pixels solid, and for now I'm gonna set it to 6a6, we'll change that in a moment, but it's that same green color. And here we can see what that pseudo element looks like. So let's also you can see it is often offset from the top a little bit. We wanna make sure we set the top value to 0, and the left value to 0. There we go, and we also wanna set the border radius, because again, this is gonna be a circle. And so we're gonna set that to 40 pixels just like we did for the parent element. Now one thing about pseudo elements is you'll notice they don't inherit. If we scroll back up to the top of our CSS here. We've set the box-sizing for all elements to a value of border-box, and pseudo elements do not inherit that by default. So what we need to do in order to force it to inherit it so that it's no longer taller and wider than our other button is we need to set box-sizing to a value. You can either set it to border-box, or you can set it to inherit, so that it inherits from everything else, and there we go. Now we see that it's the same size as everything else. Now we don't want a full circle here, we want a piece of a circle, we want an arc within that circle. So we're not gonna have all four sides of our border showing a color. Instead, most of our sides are gonna be transparent. So in order to fix that, what we're gonna do is we're gonna set border-top-color to the same value we had before, 6a6. And then we're gonna set the regular border for the full shape to a value of transparent. And when we do that you'll see that we only have one little green arch here that's visible, and that's what we want. That green arch is going to spin, that's what's going to animate in a loop after our submit button shrinks down to a smaller size. And so it's gonna make for a really nice little animation. Now we don't wanna be able to see this just yet. So by default, this also is gonna be transparent. I just wanted to show you what that looks like temporarily. So for now we're gonna get rid of the border-top-color by making it transparent as well. And later on, we're gonna change that color when we're ready for it to start animating. So that takes care of our before pseudo element. Now the way we're gonna do this is when we click on our button, we're going to add a class to that button using jQuery. And when we add a class to that button, that class is going to define the new look of this button, it's basically gonna change the button with 250 pixels. So up here underneath our button submit class. We're gonna create another rule for button submit dot and then we're gonna create a class called submitted. And when that button submit class, has the class of submitted on it, we're going to change its width to 50 pixels. So if we go into our JavaScript for example and point to our button. First of all, let's just create a variable to point to our button, we'll just call it $btn or $submit. Let's do that. We're gonna set that equal to our button in question which is btn-submit. And then I'm gonna point to our submit button and I'm gonna say .addClass, and then inside the parenthesis and inside quotation marks we're gonna add a class of submitted to that button. And when we do that we see that it changes size. And that's what we want, we want it to be 50 pixels wide by 50 pixels tall, we also want the text to go away. So let's put this here, this addClass, we're gonna put it inside a click event, cuz we don't really want to add that class until we click on the button. So we're gonna say Submit.click, And we'll set that inside of function. Let's go ahead and cut that and paste it inside the function. So now that won't happen until we click on it, but also, in addition to adding that class, we also wanna remove the text. So what we're gonna do is we're gonna set the Submit.text property equal to an empty string. So just opening and closing single quotes there. And now when we click on it, we see that happen, the text disappears and the button changes size. And that's all we really need for our JavaScript, everything else is gonna be done in CSS. So we haven't quite gotten to the point where it's an animation yet, so in our btn-submit rule, let's add a transition here. Not transform, transition, and here we're gonna transition the width. And we want it to take, let's say, 0.25 seconds. And let's try that again, so when our page refreshes, it doesn't look like it's refreshing. So we'll refresh the whole thing. Okay, now when we click, there we go, we see that it animates down. So we're one step closer. Now that it's animated down, we wanna see the before pseudo class. Remember, the pseudo class here, if we turn that on, let's turn that top border back on, we're gonna change that to a value of 6a6. Once this animates down to a smaller size, that's what it's gonna look like. And what we wanna do now is we want this green arc to just rotate around in a circle. So what we need to do is when that submitted class has been added to our button, we need to change this border top color to 6a6. So I'm gonna copy that, I didn't mean to cut it, there we go. And then I'm gonna change that back to Transparent for now. And then we're gonna make another rule for btn-submit.submitted, and then we're gonna add the pseudo class for that for before. So here we're gonna set our border top color to 6a6. And let's go ahead and save that and refresh. And now hopefully, when we click on our button, we'll see the arch appear at the top, and sure enough we do. Now you'll notice that that arc, let me refresh and show you again. Watch the arc, you'll see that it's going to appear before the animation happens and it's gonna look a little weird. I don't know if you could catch that in the video, but I do wanna fix that. I don't want that arc to actually show up until that animation is complete, and remember the animation takes 0.25 seconds. So what we're gonna do here, if we go down to btn-submit.submitted before, so for our before pseudo class. We're gonna change the border-top-color but before we do that we're also gonna add a transition here. Now the transition it's not gonna take any time at all it's just going to appear. So we've set that duration to 0 seconds, but you'll notice we've given it a delay, it's gonna delay 4.25 seconds before it appears. So now when we click w see that it didn't actually show up until that animation is complete, so that already looks a lot better. And so now what we wanna do is we wanna create a looping animation where this before pseudo element, which is just that little green arc, is rotating around endlessly. So let's create that animation, and this is gonna be a keyframe animation instead of a transition, because we want it to loop infinitely. So let's create a keyframe animation. The way we do that is we type @keyframes, and then we give it a name, let's just call it loading. And then we're gonna set a 0% keyframe, so this will be the keyframe right at the beginning of the animation. Here we're gonna set the transform property to a value of 0 degrees for rotation. Then we'll create a 100% keyframe. So at the end of the animation, we're gonna do the same thing. We're gonna set the transform property, we're gonna use rotate, and here we're gonna set it to 360deg, for degrees. So this is our animation that we're gonna use, we're just gonna rotate it around 360 degrees by default, it's going to ease out which is fine, that's what we want for this. And so now that we've created this loading keyframes animation, we just need to apply it to our submitted class for our submit button. But again, this is for the before pseudo element and we want that before pseudo element which is that green arc to start rotating. So the way we're gonna do that is we're gonna use the animation property. And we need to point to the animation we just created, which we gave the name of loading, and it's gonna last one second. So it's gonna take one second for that entire animation to take place. But we want a short delay, remember, we don't want that to start animating until after the initial animation of the width of the button. So we can put a delay here and we're gonna do that .25s, which is the length of that first animation, and then we want this to loop infinitely. So we're gonna say space, and then infinite, and that should take care of it. So let's see if that works. We're gonna click on Submit, the button animates in and then we see that rotation. And I really like the ease out at the end so it slows down at the end and then speeds up and keeps going. And that's just gonna keep looping until your next page has done loading and then it will move on.

Back to the top