Up next in 10
Advanced Button Hover Animations - CSS Only
4K views
Feb 7, 2024
Delve into the world of cutting-edge web design with this tutorial on "Advanced Button Hover Animations - CSS Only." In this video, you'll explore the possibilities of elevating your website's interactivity by implementing sophisticated hover animations using pure CSS. The tutorial guides you through the process of creating intricate and visually stunning button animations that respond dynamically to user interactions. Whether you're a seasoned web designer looking to push the boundaries of CSS or a developer aiming to enhance user engagement, this guide offers a step-by-step walkthrough. Join this tutorial to master the art of advanced button hover animations without the need for JavaScript, adding a touch of elegance and creativity to your web projects. Elevate your design skills and captivate your audience with visually appealing and responsive button animations.
View Video Transcript
0:00
Hello everyone! In this video, we're going to be having tons of fun with CSS by making cool
0:05
button animations. And if you're interested in leveling up your CSS skills, make sure to check
0:11
out my course on CSS linked in the description and sign up to be notified as soon as it releases
0:17
because it'll be releasing hopefully sometime in March. So with that out of the way, let's get
0:21
started now. Welcome back to WebDev Simplified. My name is Kyle and my job is to simplify the web
0:31
for you so you can start building your dream project sooner. So if that sounds interesting
0:36
make sure you subscribe to the channel for more videos just like this one. And now to get started
0:41
I have over on the right hand side our finished code and we're going to be making four different
0:45
button animations. The first one is this really cool pop animation where the border pops out
0:50
We have this sliding transition animation, same thing but with a circle that comes in on the
0:55
button. And then lastly, a really simple underline which shows up on the bottom of our button
1:00
whenever we hover over it. And to get us started with this project, I have some really basic HTML
1:06
and CSS done. Let's actually open this up with Live Server. I just have an index.html and a style
1:11
CSS. And as you can see, it gives us these button designs over here. And our buttons have classes
1:16
that follow the name of the text. So border pop, background slide, background circle, and border
1:21
underline. And then in our styles, I have really basic CSS set up so that our items are going to
1:27
be showing up in the center of our screen. As you can see over on the right hand side here
1:31
we have box sizing set up to border box, a little bit of spacing between our buttons
1:36
and then some really basic button styling to give us this gray on black color you can see here
1:40
And the most important thing to note about these existing styles is I set a variable for our
1:45
background color so that way we can change it later easily and also reference this later which
1:50
is really important for some of our different button styles. So let's first get started with
1:55
this border pop where we hover over and you can see the border pops outward from behind the button
2:00
which I think looks really cool. And if you remember, I mentioned earlier, these have a class
2:05
of button border pop. And in order to actually create that border that pops out when we hover
2:12
over it, we're going to be needing to use pseudo elements. So we're going to use the before element
2:17
And if you're unfamiliar with pseudo elements, I have an entire video covering pseudo elements
2:21
linked in the cards and description down below. So in order to use a pseudo element, we need to
2:26
set the content to something in our case, we'll just use an empty string. And we also need to
2:31
tell it where we want this to be. Luckily, we have position relative on our button. So we can easily
2:37
absolutely position this element inside of our button. And we want to make sure that this takes
2:42
up the entire width height of our button. So we're going to set the top to zero, the left to zero
2:49
the right side to zero, and the bottom to zero. And if we save, you're going to notice that nothing
2:55
shows up over here. But if we give this a background color of red, for example, you can see
3:01
that this red background here is covering our entire button, essentially our pseudo element
3:06
that we created is the same width and height as our button. So it's the exact same size, which is
3:11
exactly what we want, because we want it to grow from that size to be larger than our button. So
3:16
we get that little bit of a border size you see. So the first thing we need to do instead of using
3:20
a background color, we need to hear use a border. And we're going to use a distinct border size
3:26
variable. So inside of our button, we're going to set this border size variable. And we'll just say
3:32
for now two pixels is going to be the size of our border. So we'll access that border size variable
3:38
And what we're going to do is we're going to say that it's a solid border. And we want it to be the
3:42
same as our background color. And now if we save, you notice nothing shows up because it's the same
3:47
as our background color. But if we changed it to red, you can see we now have that nice little
3:52
border, but it's perfectly hidden behind our element. And to make it so that this is actually
3:56
behind our element, we can use z index and just set this to negative one. And now when I save
4:02
you can see our red border is now behind our element, which is exactly what we want
4:07
Let's just make sure we set this back to our background color. And now we have the basic of
4:11
our before element set up. So now when we hover over the button, we just want to expand that
4:16
element. So let's copy this exact same selector down here. And we're just going to make sure that
4:21
we use a hover. And we also want to do the exact same thing when we focus on the element. So this
4:28
is going to happen if we click on it, or if we tab over to the button, for example, just so our
4:32
animations are consistent. And we want to make sure that these hover effects are actually on the button
4:37
itself and not the before element. So let's just copy that over. So that way we have a hover on our
4:43
button, we're going to modify the before element. And same thing if we focus on the element
4:47
And all we want to do is expand our top left, right and bottom. So we can set our top here
4:53
And we want our top to be twice the border width. If you'll notice if we come over here
4:57
this gray border leaves a white border that is the exact same width. So if we move our border
5:03
essentially double the amount of pixels as the width of the border outward, it's going to give
5:08
us this nice gap in the middle, which is exactly the same width as a border. So all we need to do
5:13
is do a little bit of a calculation here, we want to get our border size. And we just want to
5:18
multiply it by negative two, essentially, we're moving our border twice as far outward, we're
5:24
making our element stick out negative two times the border size on all sides. And let's just copy
5:30
this down because we need to do this for the left, the right, whoops, the right and the bottom just
5:37
like that. And now if I save and I hover over this, you can see our border pops into place
5:41
exactly where we want it, which is perfect. But we need to make sure that it smoothly animates to
5:47
this position because right now it's very jarring. And over here, we have that nice grow and shrink
5:52
animation. And luckily, this is really easy to do. In CSS, we have the transition property
5:58
where all we do is list all the properties we want to transition. So in our example
6:02
we're changing the top left, right and bottom. And then we need to specify how long we want
6:08
our transition to take. For us, we're just going to say 100 milliseconds. And in order to make it
6:13
a little bit of a smooth transition, we're going to say our easing, it's going to be ease in
6:17
ease out, which essentially means it'll start out slow and end slow, and the middle will be quicker
6:23
So now if I save that, and hover, you see our border now has that pop animation where it grows
6:28
and then shrinks, just like over here. In this example, they both work exactly the same
6:33
And that's all it takes to create that border pop style of animation. The next animation we're going
6:38
to look into is this background slide, which is going to use a lot of the same tricks that we used
6:43
in this border pop. But obviously, it's going to be quite a bit different. So let's select that
6:48
element, we'll just come down here a little ways and say button dot button, background slide. And
6:55
as I mentioned earlier, we're going to use a before element again, because we're going to have a very
6:59
similar trick. This blue section you see here is actually going to be a before element. So we need
7:05
to set our content to be some empty string, just so that it's going to show up. And then we're
7:10
going to use the exact same trick with the top, left, bottom, and right to make this cover the
7:18
entire width and height. And we just need to make sure that we set our position here to be absolute
7:25
And that way, it's going to cover the entire size. And we're going to have an accent color
7:31
Because as you can see, this blue color over here is the same between all of these. So we're just
7:35
going to use a variable for that. And it's going to be called accent color, just like that. And
7:40
we're going to put this inside of our button here. So accent color, and that's just going to be zero
7:46
a F, just like that. And if you're unfamiliar with CSS variables, I also have an entire video on that
7:53
linked in the cards and description below, you can check that out if you're interested. So now that we have that done, let's save this, come over here. And you can see we have that blue
8:01
bar filling up our entire screen. But you will notice is our text is hidden behind this blue
8:06
And we want our text to actually show up on top of the blue. And there's actually a really easy
8:10
trick to make this work. What we need to do is first set our Z index here to be negative one
8:16
this is going to put our background that blue background behind our button. And then if we
8:22
select our button, background slide, and we don't want to select the before we actually want to
8:29
select the button itself. And we come in here and set the Z index to one and save, you now see that
8:35
this blue before element is showing up over top of the background of the button. But the text of
8:40
the button is showing up over top of the before element. So now our text is on top of this blue
8:46
background. And this is a neat little trick you can do messing with the stacking context of your
8:50
elements in order to make this text show up over the before element. But the before element also
8:56
shows up over the background of the element that you're covering. So now we can actually make this
9:00
slide into place from left to right. And a really easy way to do that is to modify the scale inside
9:06
of a transform, you may just think we can modify the top left, right and bottom. And that would
9:11
work. But I want to show you a different way to do the same thing. And because transforms are really
9:16
useful overall. So what we're going to do is set a transform of scale on the x axis to zero, this
9:23
is going to essentially change our width to zero. And when we save, you can see our element disappeared
9:28
And then what we want to do is also change the transform origin to be on the left. So our
9:33
animation essentially is going to start from the left and go to the right. Otherwise, it would
9:37
start in the center, which I can show you by combinating this out for now. Now what we want
9:42
to do is select our button background slide, we want to get the before element and only when we
9:49
hover over it. And we also want to do of course, the exact same thing for focus. And inside of here
9:56
we just want to modify that scale. So we can say scale of x to be equal to one. And now if I save
10:02
and hover, and let's make sure we add in a transition because right now, as you can see
10:06
it's instantaneous. So if we come in here and set a transition, we want to have a transition for
10:12
transform property. And we want it to last 300 milliseconds. Make sure we spell transform properly
10:18
And again, we're going to use ease in and out. Now if we save, you can see the animation starts
10:24
from the middle as I mentioned, but if we change our origin to the left, now our animation is going
10:29
to start from left to right, which is exactly what we want. The last thing left to animate
10:35
is the actual color of our text. So what we can do is we can copy this selector down here
10:40
this is just the actual button itself. And when we do a hover, or if we want to select that exact
10:47
same thing, but for a focus, all we want to do is change the color here to white. Now if I hover
10:53
you can see color changes to white, but it's an abrupt animation, we again want to transition
10:58
this animation. So inside of our normal selector for our button here, we can set up a transition
11:04
which is going to be for the color property. Again, we want it to last the same 300 milliseconds
11:10
with the same ease in out curve. Now when we hover, you can see our color slowly changes to
11:16
white and slowly changes back to that black. And this background slide here is now exactly the same
11:22
as the background slide we created over here. Now our next animation is this background circle
11:27
And this one's actually going to be a bit different than the other animations
11:31
because instead of having this blue colored before element that covers our button
11:35
our before element actually starts out covering our button. And when we hover over, we actually
11:40
shrink down our before element. So our button is actually blue. And our before element is the gray
11:45
color. And I'll show you how that works down here. Let's just give us a little space. And we want to
11:50
select this which is button, background circle, it just matches the name in the text there. And
11:56
we want to select that before element. Of course, we'll set the content to an empty string, we're
12:02
going to again set the top to zero, the left to zero, the right to zero, and the bottom to zero
12:11
And we also want to give it a position, which is going to be absolute. And just to make sure that
12:17
this is working, let's just set our background color here to red. And now if we save it, go over
12:23
you can see this is covered by that red background, which is exactly what we want. We also want to do
12:28
that little trick where we can get our text to show over top of the color. So we can set our z
12:33
index here to negative one. And then down, if we do the exact same selector of button and button
12:40
background circle, what we can do is we can set the z index in here to one. And now you can see
12:47
our text is showing up over top of that red background. Now in order to get that circle shape
12:52
we need to modify the border radius of our element. And we're just going to make this 50%
12:59
And as you can see, we now have rounded corners around our red color. But to make it so that this
13:04
red is actually going to expand to fill our entire button, always, we want to set the transform scale
13:10
to be 1.5. Essentially, it's going to be 1.5 times as large as normally would be. Now when we save
13:17
you see this red has encompassed the entirety of our button. But we want to make sure that none of
13:21
this overflows the edge of our button, we want to cut off all the extra overflow. So we can just
13:26
set the overflow of our button to be hidden. And now as you can see, that red color fills the
13:31
entirety of our button, which is exactly what we want. And now when we hover, we want to scale this
13:37
red color down. So we're going to select our button. And our background circle, we want the
13:44
before element. And what we want to do is whenever we hover over the button, or of course, whenever
13:50
we focus it, so let's just copy this down for focus. Just like that, what we want to do is change
13:56
our transform of our scale to be zero, we just want our element, this red color to completely disappear
14:04
And now when we hover, you see that red element disappears. But in order to get a transition
14:09
we want to come in here, set the transition of our transform. And we want to make sure that this is
14:14
going to be let's just say 500 milliseconds. And we're going to say ease in and out. Now if we save
14:21
you can see that red slowly shrinks down and grows. And what we're going to do to make this work is
14:26
we're going to make this red element actually the same color as our normal button. So we're going to
14:31
come in here and say that we want this to be our background color. So now it looks like a normal
14:36
element. And we're going to change our button background color to be our accent color. So we're
14:43
going to say accent color just like this. And now what's happening is our before element is this gray
14:49
color. And when we hover over it, it actually reveals this blue background color from behind it
14:54
And when we unhover, it re reveals that gray color and hides that blue color. As you can see, that's
15:00
the exact same thing that's happening over here, just quite a bit quicker. So our animation on this
15:04
end is just slightly slower, so it's easier for you to see. Now all we have left to do is change
15:09
our text color when we hover. So what we want to do is just copy down our selector here. So button
15:16
background circle, unhover, copy that down, and do the same thing for focus. We want to change our
15:23
color to be white. And of course, we want to make sure we transition that. So we'll say transition
15:29
color. What was it 500 milliseconds ease in out. And now when we hover, our color slowly changes
15:36
to white and our background slowly turns into that blue through that circular shape. And this
15:41
is going to scale to all button sizes because we used 1.5 as our scale here, which offsets that 50
15:47
border radius. Because remember, if we did one here as our scale, our border actually shows up around
15:52
the edge. So 1.5 allows us to get rid of that edge border. And this looks perfect right now
15:58
The last thing left to do is this border underline. And when we hover, we just get this really sharp
16:02
snappy border that shows up on the very bottom of our element. So let's come down here a little
16:07
ways. We're gonna have a button selector. And this one, remember, is button, border, underline
16:16
And we want to make sure that we get the before element just like all of these other ones
16:21
And here we're going to set the content to an empty string, just like this. And we want to
16:26
set here the left to zero, the right to zero, and the bottom to zero. But we don't want to set the
16:33
top to zero, because we only want this border, this background color, to be the height of our
16:37
border size. So what we want to do actually is set the height to that variable that we created
16:42
which is our border size. And then let's set the background color here to be our accent color
16:49
just so we can see what this looks like. And if we come over here and make sure that we set
16:54
our position to be absolute, you can see we get that border showing up just like we want it to
17:00
So this is how we want the final version of our element to look. But of course, we need it to
17:04
start where it does not look like that. And luckily, we can use that scale x that we looked at earlier
17:10
So we can just scale the x to zero. So now that's going to make our border disappear
17:15
And now if we do a selector, same exact one for our button, border, underline, just like that
17:22
we want to do it on hover. And also, we're going to do the same exact thing. But for focus
17:29
what we want to do is change our transform. Whoops, transform of scale x to be one
17:37
essentially, it's just going to go back to normal size. Now we hover the blue border immediately
17:42
shows up. All that's left to do is add in a transition. This time, we're going to be
17:47
transitioning this transform. Just like that, let's say we want this one to be 300 milliseconds
17:53
And we'll say ease in ease out. Now if we hover, you can see that border slowly grows and then
17:59
slowly shrinks when we hover off of it. And that's all it takes to create these awesome CSS animations
18:05
If you want to learn more about CSS in depth, make sure to sign up for the course linked in
18:09
the description below. And I'll notify you as soon as it releases. And also check out my other videos
18:15
linked over here and subscribe to the channel for more videos just like this one
18:19
Thank you very much for watching and have a good day
#Design
#Flash-Based Entertainment
#Visual Art & Design