Advanced Button Hover Animations - CSS Only

hello everyone in this video we're gonna be having tons of fun with CSS by making cool button animations and if you're interested in leveling up your CSS skills make sure to check out my course on CSS linked into the description and sign up to be notified as soon as it releases because it'll be releasing hopefully sometime in March so with that out of the way let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this one and now to get started I have over on the right hand side our finished code and we're going to be making four different button animations the first one is this really cool pop animation where the border pops out we have this slide in transition animation same thing but with a circle that comes in on the button and then lastly a really simple underline which shows up on the bottom of our button whenever we hover over it and to get us started with this project I have some really basic HTML and CSS done it's actually open this up with live server I just have an index.html and a style CSS and as you can see it gives us these button designs over here and our buttons have classes that follow the name of the text so border pop background slide background circle and border underline and then in our Styles I have really basic CSS setup so that our items are gonna be showing up in the center of our screen as you can see over on the right-hand side here we have box sizing set up to border box a little bit of spacing between our buttons and then some really basic button styling to give us this gray on black color you can see here and the most important thing to note about these existing styles is I set a variable for a background color so that way we can change it later easily and also reference this later which is really important for some of our different button styles so let's first get started with this border pop where we hover over and you can see the border pops outward from behind the button which I think looks really cool and if you remember I mentioned earlier these have a class of button border pop and in order to actually create that border that pops out when we hover over it we're gonna be needing to use pseudo elements so we're gonna use the before element and if you're unfamiliar with pseudo elements I have an entire video covering pseudo elements linked in the cards and description down below so in order to use a pseudo element element we need to set the content to something in our case we'll just use an empty string and we also need to tell it where we want this to be luckily we have position:relative on our button so we can easily absolutely position this element inside of our button and we want to make sure that this takes up the entire width height of our button so we're going to set the top to zero the left to zero the right side to zero and the bottom to zero and if we save you're gonna notice that nothing shows up over here but if we give this a background color of red for example you can see that this red background here is covering our entire button essentially our pseudo element that we created is the same width and height as our button so it's the exact same size which is exactly what we want because we want it to grow from that size to be larger than our button so we get that little bit of a border size you see so the first thing we need to do instead of using a background color we need to here use a border and we're gonna use a distinct border size variable so inside of our button we're gonna set this border size variable now we'll just say for now two pixels is going to be the size of our border so we'll access that border size variable and what we're gonna do is we're gonna say that it's a solid border and we want it to be the same as our background color and now if we save you notice nothing shows up because it's the same as our background color but if we changed it to red you can see we now have that nice little border but it's perfectly hidden behind our element and to make it so that this is actually behind our element we can use z-index and just set this to negative one and now when I save you can see our red border is now behind our element which is exactly what we want let's just make sure we set this back to our background color and now we have the basic of our before element setup so now when we hover over the button we just want to expand that element so let's copy this exact same selector down here and we're just going to make sure that we use a hover and we also want to do the exact same thing when we focus on the element so this is going to happen if we click on it or if we tab over to the button for example just so our animations are consistent and we want to make sure that these hover effects are actually on the button itself and not the before element so let's just copy that over so that way we have a hover on our button we're gonna modify the before element and same thing if we focus on the element and all we want to do is expand our top left right and bottom so we can set our top here and we want our top to be twice the border width if you'll notice if we come over here this gray border leaves a white border that is the exact same width so if we move our border essentially double the amount of pixels as the width of the border outward it's going to give us this nice gap in the middle which is exactly the same width as a border so all we need to do is do a little bit of a calculation here we want to get our border size and we just want to multiply it by negative 2 essentially we're moving our border twice as far outward we're making our element stick out negative 2 times the border size on all sides now let's just copy this down because we need to do this for the left the right woops little rate and the bottom just like that and now if I save and I hover over this you can see our border pops into place exactly where we wanted which is perfect but we need to make sure that it smoothly animates to this position because right now it's very jarring and over here we have that nice grow and shrink animation and luckily this is really easy to do in CSS we have the transition property where all we do is list all the properties we want to transition so in our example we're changing the top left right and bottom and then we need to specify how long we want our transition to take for us we're just going to say 100 milliseconds and in order to make it a little bit of a smooth transition we're gonna say our easing it's going to be ease in ease out which essentially means it'll start out slow and end slow and the middle will be quicker so now if I save that and hover you see our border now has that pop animation where it grows and then shrinks just like over here in this example they both work exactly this same and that's all it takes to create that border pop style of animation the next animation we're going to look into is this background slide which is going to use a lot of the same tricks that we used in this border pop but obviously it's going to be a quite a bit different so let's select that element we'll just come down here a little ways and say button dot button background slide and as I mentioned earlier we're gonna use a before element again because we're gonna have a very similar trick this blue section you see here is actually going to be a before element so we need to set our content to be some empty string just so that it's going to show up and then we're going to use the exact same trick with the top left bottom and right to make this cover the entire width and height and we just need to make sure that we set our position here to be absolute and that way it's going to cover the entire size and we're gonna have an accent color because as you can see this blue color over here is the same between all of these so we're just gonna use a variable for that and it's gonna be called accent color just like that and we're gonna put this inside of our button here so accent color and that's just going to be zero a F just like that and if you're unfamiliar with CSS variables I also have an entire video on that 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 bar filling up our entire screen but you will notice as our text is hidden behind this blue and we want our text to actually show up on top of the blue and there's actually a really easy trick to make this work what we need to do is first set our Z index here to be negative 1 this is going to put our background to that blue background behind our button and then if we select our button background slide and we don't want to select the before we actually want to select the button itself and we come in here and set the Z index to 1 and save you now see that this blue before element is showing up over top of the background of the button but the text of the button is showing up over top of the before element so now our text is on top of this blue background this is a neat little trick you can do messing with the stacking context of your elements in order to make this text show up over the before element but the before element also shows up over the background of the element that you're covering so now we can actually make this slide into place from left to right and a really easy way to do that is to modify this scale inside of a transform you may just think we can modify the top left right and bottom and that would work but I want to show you a different way to do the same thing and because transforms are really useful overall so what we're gonna do is set a transform of scale on the x-axis to zero this is going to essentially change our width to zero and when we save you can see our element disappeared and then what we want to do is also change the transform origin to be on the left so our animation essentially is going to start from the left and go to the right otherwise it would start in the center which I could show you by commentating this out for now now what we want to do is select our button background slide we want to get the before element and only when we hover over it and we also want to do of course the exact same thing for focus and inside of here we just want to modify that scale so we could say scale of X to be equal to one and now if I save and hover and let's make sure we add in a transition because right now as you can see it's instantaneous so if we come in here and set a transition we want to have a transition for our transform property and we want it to last 300 milliseconds make sure we spell transform properly and again we're going to use ease in and out now if we save you can see the animation starts from the middle as I mentioned but if we change our origin to the left now our animation is going to start from left to right which is exactly what we want the last thing left to animate is the actual color of our text that's what we can do is we can copy this a selector down here this is just the actual button itself and when we do a hover or if we want to select that exact same thing but for a focus all we want to do is change the color here to white now if I hover you can see the color changes to white but it's an abrupt animation we again want to Train in this animation so inside of our normal selector for a button here we can set up a transition which is going to be for the color property again we want it to last the same 300 milliseconds with the same easin out curve now when we hover you can see our color slowly changes to white and slowly changes back to that black and this background slide here is now exactly the same as the background slide we created over here now our next animation is this background circle and this one's actually going to be a bit different than the other animations because instead of having this blue colored before element that covers our button hour before element actually starts out covering our button and will be hover over it we actually shrink down our before element so our button is actually blue and our before element is the gray color and I'll show you how that works down here let's just give us a little space and we want to select this which is button background circle it just matches the name in the text there and we want to select that before element of course we'll set the content to an empty string we're going to again set the top to zero the left to zero the right to zero and the bottom to zero and we also want to give it a position which is going to be absolute and just to make sure that this is working let's just set our background color here to red and now if we save it go over you can see this is covered by that red background which is exactly what we want we also want to do that little trick where we can get our text to show overtop of the color so we can set our z-index here to negative one and then down if we do the exact same selector of button and button background circle what we can do is we can set the z-index in here to 1 and now you can see our text is showing up over top of that red background now in order to get that circle shape we need to modify the border radius of our element and we're just going to make this 50% and as you can see we now have rounded corners around our red color but to make it so that this red is actually going to expand to fill our entire button always we want to set the transform scale to be point-five essentially is gonna be 1.5 times as large it normally would be now when we save you see this red has encompassed the entirety of our button but we want to make sure that none of this overflows the edge of our button we want to cut off all the extra overflow so we can just set the overflow of our button to be hidden and now as you can see that red color fills the entirety of our button which is exactly what we want and now when we hover we want to scale this red color down so we're gonna select our button and our background circle we want the before element and what we want to do is whenever we hover over the button or of course whenever we focus it so let's just copy this down for focus just like that what we want to do is change our transform of our scale to be zero we just want our element this red color to completely disappear and now when we hover you see that red element disappears but in order to get a transition we want to come in here so the transition of our transform and we want to make sure that this is going to be let's just say 500 milliseconds and we're gonna say ease in and out now if we save you can see that red slowly shrinks down and grows and what we're gonna do to make this work is we're gonna make this red element actually the same color as our normal button so we're gonna come in here and say that we want this to be our background color so now it looks like a normal element and we're gonna change our button background color to be our accent color so we're gonna say accent color just like this and now what's happening is art before element is this gray color and when we hover over it it actually reveals this blue background color from behind it and when we uncover it reira Veals that gray color and hides that blue color as you can see that's the exact same thing that's happening over here just quite a bit quicker so our animation on this end it's just slightly slower so it's easier for you to see now all we have left to do is change our text color when we hover so what we want to do is just copy down our selector here so button background circle on hover copy that down and do the same thing for focus you want to change our color to be white and of course we want to make sure we transition that so let's say transition color what was it 500 milliseconds ease in out and now when we hover our color slowly changes to white and our background slowly turns into that blue through that circular shape and this is going to scale to all button sizes because we used 1.5 as our scale here which offsets that 50% border radius because remember if we did one here as our scale our border actually shows up around the edge so 1.5 allows us to get rid of that edge border and this looks perfect right now the last thing left to do is this border underline and will be hover we just get this really sharp snappy border that shows up on the very bottom of our element so let's come down here a little ways I'm gonna have a button selector and this one remember is button border underline and we want to make sure that we get the before element just like all of these other ones and here we're going to set the content to an empty string just like this and we want to set here the left to 0 the right to 0 and the bottom to 0 but we don't want to set the top to 0 because we only want this border of this background color to be the height of our border size so what we want to do actually is set the height to that variable that we created which is our border size and then let's set the background color here to be our accent color just so we can see what this looks like and if we come over here and make sure that we set our position to the absolute you can see we get that border showing up just like we want it to so this is how we want the final version of our element to look but of course we needed to start where it does not look like that and luckily we can use that scale X that we looked at earlier so we can just scale the X to 0 so now that's going to make our border disappeared and now if we do a selector same exact one for our button border underline just like that we want to do it on hover and also we're going to do the same exact thing but for focus what we want to do is change our transform oops transform of scale X to be 1 essentially it's just go back to normal size now we hover that blue border immediately shows up all that's left to do is add in the transition this time we're gonna be transitioning this transform just like that let's just say we want this one to be 300 milliseconds and we'll say ease-in ease-out now if we hover you can see that border slowly grows and then slowly shrinks to only hover off of it and that's all it takes to create these awesome CSS animations if you want to learn more about CSS in depth make sure to sign up for the course linked in the description below and I'll notify you as soon as it releases and also check out my other videos linked over here and subscribe to the channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 55,179

Rating: 4.9674954 out of 5

Keywords: webdevsimplified, css animations, css button animations, button hover effect, button hover effect css, advanced css button, advanced css button hover effect, css button animation, css button animation effect, css hover animation, css transform, css animation effect, css border animation, css button effects, css button transform, css button hover slide, css button hover effect, css hover effect, css hover, button hover animation, button hover, css button, css, css animation

Id: cH0TC9gWiAg

Length: 18min 22sec (1102 seconds)

Published: Sat Feb 01 2020