Fun button effect with HTML, CSS & JS

Key Takeaways

hello my friend and friends thank you so much for coming to join me for yet another video and today we're going to be looking at how we can create buttons like this I saw this shot by Patrick H over on dribble I thought it looked really cool and I wanted to remake them so today that's exactly what we're going to be doing and this is what we're going to be starting with right here where I've sort of set up some very basic settings for the buttons which we'll be looking at in a bit more detail uh shortly um I also screenshotted the different states that are here at the bottom just to make life a little bit easier to match without having to look at the gifts so to start off with I just have two buttons sitting here called glassy button in my HTML so nothing too fancy there which is giving me those two things uh and I do have some basic styling that is on these just to give us a bit of a starting point there's nothing too complicated here these two custom properties here are just referring to some colors that I have set up and I'll talk more about the surface one in a little bit um but I'm just basically using that to put the two colors using n child don't use this for production with the nth child but I'm in silly demol land so I can get away with stuff like this now to go through this tutorial we will be using a few more advanced things going to be using a lot of custom properties we're going to be using nesting and just the rest will be sort of some cool little neat tips and tricks and things nesting doesn't have the best browser support but I'll explain it quickly and I'll link to a video in the description that goes into more detail on how it works just cuz browser supports not perfect but in this case because we're going to have lots of different pieces it is really going to help us stay a lot more organized so the first thing we're going to do is here inside of this glassy button I want to create a hover state so uh we're going to come here and we'll make a hover an Focus so I can say and hover and focus I'm going to use Focus visible if you don't know the difference between focus and focus visible uh basically it's just how Mouse interactions work where it won't necessarily bring in the focus State uh if you want more on it there should be a card popping up and uh a link in the description just on the difference between what focus and focus visible are uh and in here we're going to start off with a nice simple line and we can actually use a little bit of sort of modern CSS where we don't have to use a transform we can just come in with a trans late now and so when I hover you can see it jumps up and moves down nothing too complicated there which is great uh obviously we do want this to actually transition and not just jump up and down especially because that can lead us into like one of these awkward situations where it hops around and obviously we want to add a transition to this so it doesn't do that but I'm not going to put it here and I'll explain why in a second but just really fast if you've never seen nesting before again I'll put a link in the description on more information on how it works but this would be the same as having my glassy button hover and then my uh do glassy button Focus you get the idea right so the Amper sand is a placeholder for the the selector the parent out here and right now it's not super indispensable um but it's really going to come in handy sort of as we go through this uh with a bit a few more things coming on here but the problem with doing the translate here is the background is moving up and just like you can see down there we want the background to move down uh or yeah it's going to shift down a little bit as the rest of it moves up to sort of create the different layers or levels within the button so I don't actually want all of these things to be here uh what we actually want to do is recreate that background using a pseudo element so to be able to do that and as I said we're not going to need the hover and focus that are right here so I'm going to delete those and so I'm going to paste this in here which is pseudo element that I already have set up uh you can see that that's caused some problems because I have a position absolute on here so I'm just going to come back up onto my glassy button the parent and we're going to do a position of relative just so this is now the containing block and then this positioning is an inset of zero which is the top bottom left and right of zero so it's now positioned with relative to the button instead of the viewport uh we're doing the Border radius inherit just so it matches the Border radius here which just makes our life a little bit easier we set it there and it works anywhere we need it to and the background color is coming through as well now one thing I'm going to do is on the original background color for the button I am going to make this transparent just because by default buttons do come with a color on them they have that like grayish color and we want that to go away so transparent makes it transparent and this will act as our background the one thing we're going to have to do here as well is we're going to want to bring in a z index on here Z index of1 so it pushes it back um behind our text right so we can actually see it we're going to run into a bit of a problem with this but it's solvable um when we get there but the advantage of doing this now is if we come and we're going to do our uh hover and our and focus visible again now here if I do that translate and we do our 0 and5 REM so it's Zer on the x axis .5 REM up and down so it will move up by5 R and it's going to look like the exact same thing is happening the advantage here now though is we can actually come inside here and this is again wine nesting it comes in handy uh is I can come on that after right there and on here we can come in with another translate and for this translate we can come in with like a zero and then maybe a you know 65 rem or something like that so the offsets a little bit more and it's going to go down so we're moving the button up and we're moving the after down um and that that just makes everything work a little bit better there I think right that that makes sense to me so obviously uh as I mentioned before we don't want it to necessarily jump like that we want a little bit more to happen so on the after here I am going to also add this transition and we're going to use I'm going to put 200 milliseconds it matched well with what we were doing and then it's sliding down the text is still jumping I haven't put a transition there yet just because there's another little bit of a problem uh that's going to come up while we're doing this which is let's just come actually on right when we hover we actually need like a white background on the text area right and we're going to do it semi-transparent we can do the blurring effect and all of that but let's say we come here uh on this hover and focus visible and we're going to give it a a background so background let's just do coral right now so it really stands out something that we can see and when I have her on top there's a problem you can see that the coral color is actually behind the pseudo element even though the pseudo element has that Z index of negative 1 and to really actually make this stand out let's move that color to here let's do the coral here instead uh and now the coral colors in front because we have the negative Z index but then it jumps to the back and this is one of those fun things with that index uh where we're creating a new stacking context and this can be a little bit annoying for sure but the new stacking context is being created when we do this translate right here and that's because translate and transforms are one of the things like if you lower an opacity that would be another thing you can do that creates a new stacking context and what that means basically is that the elements that are inside of this even if they have a negative Z index they can't escape out of it it's a little bit like when we did the position uh relative on the parent to make this makes it containing block and then the position absolute is like contained within that space the same thing is happening when you have a new stacking context where the element can't actually Escape outside of the parent anymore so the blue ends up in front of the background even though it wasn't here because here there was no new stacking context frustrating definitely uh this is one of those times where this can be really annoying to happen but because it happens there is a luckily Simple Solution um well it's not I guess it's a simple solution it's not a difficult solution but we come on both both of these and we're just going to have to add a span here um I don't love having to do this but it's as far as I know this is the only way we can actually get away with it um because we're going to need a few more moving Parts here potentially you could have the other background also as like a before pseudo element too but just to deal with the text and everything else that's going on here I think this is the easiest solution just to throw the span um within there it's not something that's difficult to do especially if this becomes a component or something like that um then you don't have to worry about it too much at all so so let's jump back to our CSS now and what we're going to do is we're going to remove the background color from here we'll make this transparent again uh transparent and then here what we'll do is we'll jump in and we'll add our span and I don't need the Amper sand anymore in the older uh Syntax for nesting you did need to include some sort of symbol at the beginning but they've dropped that requirement um so I'm not going to use it here and I'm going to add the background to here background color can be my coral for now and we we'll fix the coloring uh in a minute but there we go we can see that that's working and at the same time over here what I'm going to do is I'm actually going to come down here where we had this Focus um the focus States here and I'm just going to come here and add the span as well because I want the span to be what's moving up um during the entire thing there is a funny thing here though and actually learn this will making this video uh and I didn't realize this before you can't do transforms on inline elements interesting right so now it looks like it's broken because this doesn't work on a span I honestly I never knew that until now and I've been teaching teaching CSS forever maybe it's one of those things that I learned and forgot but I don't think I actually ever knew that one um so another interesting limitation that's okay though because we're we need that span to eventually be this entire glassy area so that means we need padding and stuff on it anyway so we might as well just come on here and say that this is a display block and when I make that a display block now we can see that it actually moves up and down so because of that I'm also going to come on here we can grab that same um transition that we had and I can put it onto my span so we'll save we'll go take a look and now you can see that they're moving in opposite directions and that's perfect and so what I'm going to do is I'm going to take the padding that I had originally had on the button itself and we're going to we'll copy that line and I'm going to make the padding here zero just because normally buttons by default do have a little bit of padding on them so we'll put padding of zero there and we're going to come down onto here now and we'll add the padding uh on the element it or on the span I should say not the element itself and we can also do the Border radius of inherit here as well and we get our buttons and now we're sort of getting closer to that style where we have the separation that's going on between the two of them now one thing that's kind of awkward here and we're going to have we have a span that's nested we have the after here that's nested we're going to have another suit element after that's going to be uh on the span and one thing I like to do when this happens is I don't want to have to hunt through my code if I ever need to make changes to these things like if I'm I would look at this I would assume the padding is on the button and then I look padding zero and that's kind of weird you come back to this in 6 months and you're just a little bit confused by what's going on so we're going to take some of the things here and make them custom properties instead so here on the glassy button we can come and we can do this I'm going to say padding and the padding we had is my one R 1.5 RM uh and the other thing we'll do here is the timing of the animation uh this one just because we're going to be using it in a whole bunch of different places so it makes sense to have it as a custom property so for that one we'll call it transition speed and we can do the 200 milliseconds there and that means my padding here will be my VAR padding and I'm putting an underscore here um it's a little bit of the idea that Leia veru had when it came to um sort of private properties for custom properties where we're just sort of saying this is locally scoped and not something you'd find in the global scope and it just helps like if I'm looking for my button text this doesn't have it I know I can go look in my root whereas here uh they have the underscore so if I find this padding somewhere I know just to look in the parent and find the setting there she used it in a little bit of a different way that just sort of helps encapsulate things a little bit more I'll put a link to her article in the description if you want to read more about the idea uh but I'm just going to use it like this and then we can go and grab the transition speed here as well and just update these so I'll do that really fast so there is the transition there and then we can also just drop it in right here and anytime that we need to use a transition speed now just to make sure it's always consistent everywhere it makes it a lot easier when it's a custom property now let's get the the glassy look going a little bit here because there's we're going to make we're going to split this off into two sort of sections first we're going to get the blurry effect and then later on we'll look at how we can add this graininess to it CU it's a little bit uh different it's not complicated by any means but it's a little bit different um how we're going to do that but for the first part here we can just go and find our span again so let's go up there's the span inside my glassy button and here instead of using coral the first thing we'll do is we'll just switch the background to be white so we can do a 0 0% 100% which with hsl should make it white and then we'll just come with like A4 um and you can play with how much you actually want that to be you can see we have the the different colors that are coming through there so that's perfect and then we're also going to come through here and we're going to add a backdrop filter of blur and how blurry you want is you know where we add a number there and then we get a a glassy effect which is kind of cool um or it's a Blu-ray effect it gives us a little bit of glass morphism style but I think the graininess really brings it home um because it's like the frosted glass then which usually is when you get the blurriness coming through so I like that touch um from this design now the thing is we don't always want that to be here right so what we're actually going to do is let's copy these two lines here and I'm going to bring this blur down to zero and I'm going to bring the opacity down to zero here so it looks normal everything's just kind of weird again uh right right there and then what we can do is we can come here we have the focus invisible States and on my span I can bring those in so the background color and the backdrop filter are coming in so that only affects us when we're hovering of course now it's like a really weird jump so what we're going to do is we're going to come back up to here uh where we have those we have this transition and we just want to transition also our background color right and we want to transition the backdrop filter as well so I'm just going to come on both of those then we can copy this paste those back in and put a comma so now we're just transitioning all of that it just sort of smoothly moves in another thing that's important here there's a few different things we need for the hover effect but you'll notice that there's the background sort of shrinks down a little bit on Hover just to create more of like a separation between the color and the the glass that we have quote unquote glass so to be able to do that what we can do is when we come down here we have the focus State again we have my after I'm also going to come and add a scale here and we're going to scale it down a little bit we'll try like .95 or something like that so just you can see how it's scales a little bit down of course when it's scaling down it's looking good I think my translate here is actually way too big uh right so maybe a 125 even something like that will probably match now it's not exactly the same as the image that's there but to me that's okay that it's not the same as that image just because it's going to move around a little bit anyway with our Mouse eventually that'll be near the end when we do that and so because we have to get that movement in there anyway matching the exact positioning of it right now doesn't make make total sense so I think that actually looks pretty good we're just going to want to come back up to here where we're outside of the hover and everything we have this one I'm going to just duplicate this line of code and make this for my scale right there and make sure this is a comma and now when I do that o that looks a lot better right that that's much much nicer than what we had before so perfect I'm really happy with that though I really think the graininess is what brings this home so much more and we're going to see how we can do that in a second but before we do that I want to explore a little bit more with the custom properties just to open up the controls for things a little bit more and so what I mean by that is like right now we have sort of our background color here the blurriness that's coming through uh when we're hovering we we're even going to have to change that a little bit for when we're clicking so we're going to have another section down here for when we're dealing with all of that and it's annoying again I I mentioned this already but it's annoying if you're making these changes on an element or a component or something if you have to go searching through all the different parts to be able to find when things are changing so this is where I really like exposing things as custom properties and it's you know let's make these things that I want to enable people to be able to tweak or change and when I say people it could be me it could be people on my team whatever you guys if you want to take this button and use it somewhere it's easy for you to make adjustments to it but I don't want everything to be easy to adjust I only want certain things and those are the things that I expose as custom properties so the first ones we're going to expose here are these ones where we have the hover OPAC opacity and the Pressed opacity because we're going to have to add that press state in and then the hover blurriness and the Pressed blurriness and the other one I want to add is also like when we do this how far do these things actually separate and so to do that what we're going to do is we're going to come here and I'm going to add this in my hover offset and my pressed offset so when I do this how how far apart are they going or like what's the movement basically and then the Pressed is when I click like how does it move and actually 125 I think we'll do like a 2.25 here uh the one thing I haven't brought in here is the scale or the offset I have for the pseudo element this is different things I'm going to put on this is just the translate effectively that I have uh just cuz I think the pseudo element we can leave alone and if we're making adjustments and changing things it's mostly going to be here that I think those would be worth doing if you're following along and you think you should expose more things by all means you can if you think this is crazy and you don't want to bother with this you don't have to do this I just think it makes it a lot easier than when you have this giant wall of things with lots of different controls I think this makes life a lot easier um to be able to play with and make adjustments on so what we're going to do is let's go and bring these into our our layout now or in into where we're using things so that blur can actually stay the same but we're going to come down here into my H hover and focus and here we had my VAR and that was my hover opacity was coming in here so it looks exactly the same as it did before uh the next is this one which was my VAR and my uh that was my hover blurriness and so again it should look exactly the same perfect then here we have my VAR and this one's going to be a little bit different because this is my um hover offset but I had that as a positive value up in my custom properties just cuz I think it's a bit easier to understand how to use it if it's a positive um maybe I'm wrong on that but you can see it's going the wrong way right now and I don't want it to do that so I'm going to do a cal here and on that Cal we can just come in and then say * one and I do this with my custom properties all the time where you make it easy up top and then you do your calculations and more complicated things lower down so I'm happy with those I think that's going to work well for us um as I said I'm not exposing these just cuz I think even if we make adjustments the way those work should be okay but if you want to expose these things you can now we want to bring in that active state so when we push we made those custom properties we might as well use them uh so here I have my purple bracket and so I'm going to find that one here and then I'm going to say and active so active is when a button is actively being clicked on or if you're using your keyboard and you push your uh enter or spacebar it's pushing your button is then active so we're going to use our active State here uh and on the active we can come in what do we want we the background color will change the backdrop filter will not change the translate will change so let's just come here and copy all of these actually well take this entire selector or actually we'll take all of these because all of this is going to change other than the backdrop filter and here my hover opacity is just going to change to my uh pressed opacity the hover offset will change to my pressed offset uh and then here let's just hit save actually and so when I do that you can see it's dropping down and the opacity is going down just cuz here the reason I'm dropping the opacity as you can see here it's a lot brighter and here the whiteness seems to go away a lot so I'm dropping the opacity on it uh and then here my scale let's try a 0.9 cuz it definitely gets smaller right that looks pretty good maybe a like 875 or something we could play around with that a little bit there that looks good I like that uh and then the translate here could also change so my translate uh does it need to change we could probably keep it the same actually um but if we needed to um maybe actually that looks a little bit better cuz we're keeping it a little bit further away uh so I'm going to leave it like that and I'm pretty happy with it the other thing that I had was the blurriness actually so the back so I think I removed my backdrop filter uh for some reason I didn't think of it but we do actually the backrop filter I don't know why I decided I didn't need to change that but we did where we're going to use my VAR and it was my pressed blurryness uh right and then if I come on that it gets more blurry when we click down did I not change that I did hover blurriness I don't know why I thought I didn't need to change it but I had that more blurry when we go down cuz it looks a little bit blurrier there in my opinion and when you watch the animation I think it's a bit more obvious so let's just go look up here really fast so this is where you know maybe this is A2 and this becomes a 12 or whatever you want and then you can see it's less blurry and it becomes more blurry and that's why I love exposing things here this becomes a three and this becomes a three because you don't want it to actually change and then it doesn't change when you push down and all these different things we can do without having to hunt through our code I love doing stuff like this um so I'll put it back to the the values that we had because I think they match the design pretty well but it's just cool that we can change all of these uh transition speed we could change and everything's going to slow down you get the idea so let's go and add that graininess in and to add the graininess I'm going to go over to this website right here which is grainy gradients. ver. apppp uh I'll put a link to it in the description of course and this is super useful because you just get some controls that you can play with your size your base frequency your octaves and stuff and it's going to give you graininess in SVG form which can be really useful if you prefer you could definitely come in with a PNG or potentially even a jpig here if you wanted to um any of those would potentially work I'm going to copy it here so nice and easy we hit copy and then I'm going to go over to this other website which is a URL encoder for svgs uh and I actually already have it there but normally when you get here you have a blank site and you just paste in the SVG that you have and then you can come over here and copy the ready for CSS version of it and that's going to give us this grainy texture that we'll be able to use and add into our buttons so to be able to play with that now uh we could put it directly on the span as a background image uh right cuz this is coming in as a background image if you paste it in your code it will be a background image uh the problem here is it's always there and it's also really dark uh whether you're doing this as a PNG or SVG or however you're doing it you're probably going to want it as a background image but background images are annoying that you can't control the opacity of them because that's really what I want to do now I want to zero opacity and have it come in and be kind of faint I don't want it to be this dark or intense I guess uh cuz it's a little bit much so for that on my span I have here this is the the first nested span so it's the span on the regular button I am going to come in and we're going to come in and do an and before so we're going to add a pseudo element to our span and because it's a pseudo element that does mean that we're going to come here and give it uh content we'll do our position absolute and we'll come in with an inset of zero as well and then we'll throw the background image directly on there and we can see it's working of course there is a small problem now it's in front of our text so we can also come in with a zed index uh index of -1 and actually when you do this um you probably will get this where it's sticking out so just uh we'll throw that overflow of hidden on here as well which I sort of snuck in there along the way uh cuz I'd run into a problem with my code and had to go backwards and forgot to remove that bit uh when I was recording so there we go though um or it wasn't my code actually I paused my recording and forgot that i' paused my recording and went on for like a little while so that was annoying but we're here and we're we're back to where we were so we have that there and now the big Advantage is we can control how grainy that actually is by playing with our opacity so we can come here and actually just say that this has uh we come at the bottom here and we'll say this as an opacity of zero cuz we don't want it to be grainy here we only want that to come in when we get that glassy effect coming on and then this will want to transition in like everything else so we will come on this with a transition for the opacity and you guessed it we're going to use my uh our my we're going to use our VAR transition speed custom property there so when we bring in the opacity it will transition like everything else and just so you know if ever you need to have a background image and you have to play with the opacity of it this is generally the way to do it you a pseudo element and you position it um and just have it there and play with the opacity of that pseudo element with the negative Zen index it's the best way to do it cool so that's there now we can go and find our hover and focus States here's my span and that span was on here and now I have to remember if I did it as a before or after and I think I did it as a before so I can come in with my opacity and I can put an opacity and then the graininess will come in when I hover which is awesome but we're also going to want to change it lower down and what I'm going to do here is I'm going to come and I'm going to make a variable called uh hover frostiness um it's a little bit of a silly name but this is like it's frosted glass in my opinion so the frostiness makes sense um I don't know if we need hover actually I think the frostiness actually stays the same so we're just going to do a frostiness like that uh right so before opacity perfect we have my frostiness right there and so we can come back up and we're going to come up to here we have my offset the blurriness we'll come here and we'll just come in with our uh frostiness frostiness like that and let's say we want it at like a.4 or something and there we have it if I come in let's change that to like a 0 2 ah it's less Frosty 3 it's more Frosty right so we can play with that number a little bit and then when we click just like this one you can see the background is getting we're going more I think the point 4 is actually a bit High let's try like a 32 a little bit more oops I used my keyboard there we have it selected there we go that looks a lot closer to what the actual design looks like I'm pretty happy with that perfect I realized we don't have a border we're going to have to add the Border in or an outline so we'll do it as an outline uh I think and we'll fix that weird thing I'm getting there with like the bigger box um we'll fix that at the same time I'm just double-checking but I'm I'm pretty happy with how that looks right now so I think I'm going to stick with that frostiness right there awesome so yeah let's let's fix that so let's come down here and this is one thing you want to be very very very careful with but on my glossy button I'm actually going to come and I'm going to say that this has an outline of zero um which means when we tab onto it we're removing the outline do not do this unless you have a very clear Focus State on your items very clear and I think in this case we we qualify because there's a big change coming in when I'm using my keyboard on here so people should clearly be able to see what's being activated don't do this as a default just because you don't want an outline on something uh always change the outline if you don't like the outline or come in with something that's very obvious don't remove outlines just because you don't want to have one there just saying that uh they're very important for accessibility reasons uh but then what we can do is we can add that outline back on the span but I don't always want it I only want it on my hover state so let's go find my hover my focus my span and we can come here with an outline and I guess it's one pixel solid and then uh we'll do an hsl that's going to be white but it' be I don't know five maybe something that's not 2.7.6 and play around with different numbers but there we go um just cuz I think if it's 100% it's going to be a little bit too dark it almost looks like it's not thick enough that looks too thick so I'll stick with one um and you can play with the number a little bit that looks maybe be closer to the design uh you could also do this as a border just be careful if you do it as a border youd probably need to set a border up in the the normal State as well and then change the color of it when you're in the hover and focus CU it could potentially cause some layout Shifty stuff from going on cuz borders take up space whereas outlines don't take up any space on the Box model but yeah there we go I think that's looking pretty good I'm really happy with that I think it's doing a pretty good job of matching the overall design and yeah I think it's coming together really well we have to add that Mouse movement in right now but just want to say this was doing things like this can be so much fun to create and make things like this where you're trying to match designs cuz sort of like that thing I mentioned with the span I never knew that despite teaching CSS for a decade now and one of the things I love about trying to create stuff like this it's just always an opportunity to learn a little bit extra find new fun things that you can do and there's actually another thing coming up in a little bit that uh for the animation to make get less janky um that I really like that we're going to be diving into uh that I couldn't figure out for the life of me and I'm super happy that I know it now and it's one of the reasons I love writing CSS all the time because I'm just always learning something new and speaking of always learning something new and staying on top of things today's video is being brought to you by brilliant which is a place where you learn by doing with thousands of interactive lessons in math data analysis Ai and probably most relevant to you programming the platform is put together to help you build understanding from the ground up with Hands-On problem solving where you get to play with the concept that you're learning about and as I mentioned it's all about learning a little bit every day with bite-sized fun lessons that you can squeeze into your busy schedule now we're about to jump into some JavaScript and if you're newer to web development and have been struggling with that jump into JavaScript their thinking in code and creative coding courses are great for understanding How to Think Through problems and see how things like Loops variables and conditionals work now those two courses graduate into their programming with python course but those early ones are really a great way to set the stage for getting into JavaScript or any other language where you need to start to learn how to think like a programmer to give brilliant a try for free for 30 days you can visit brilliant.org Kevin Powell or click the link in the description and if you enjoy it you'll also get 20% off if you decide to get a premium subscription a very big thank you to brilliant for helping support my channel and with that done let's dive into the JavaScript and have a little bit of fun with that so the first thing is uh make sure if you're following along that you do have a link to your Javascript file um just called M main.js and I have a defer here I have a in the head but we just want the whole page to load and then we'll go over to my JavaScript file and we can jump over there and so the first thing we need to do is get all of our buttons here so I'm going to do a const of glassy buttons and then we can just do a query selector all on that to get uh you know all of our buttons in this case we have the two of them so I want to make sure it works for both but if you're putting this into a bigger project you might have more than just two now here what we'll do is we want to go through each one of our buttons so we can use a for each Loop there so glossy button. for each uh and then inside of some parentheses we're going to do an arrow function where we're going to look at every single one of the buttons uh that's there and we're going to do something so we're using our Arrow function and I'm going to come inside the curly braces there and just go on a new line where now we want to do stuff so what do we want to do for each one of those buttons in this case we're going to need an event listener on each one of them because we're going to have to pay attention to when the mouse is moving on top of the button so to be able to do that we're going to add an event listener that's not too complicated uh listener and we want to be looking for a mouse move and when we detect a mouse move on top of that button we want to do something so once again we can have an arrow function but in this case I do want to put an e here this is for like event we want to keep track of the event because this gives us a lot of information about whatever is happening related to that Mouse movement now coming in here I'm going to add two more variables which are going to be my Center Y and my Center X which it's going to get the offset width and offset height of my button and divide it by two and the reason for that is when the movement was happening in the original one it was always based on the center and it would either go negative or positive but it was like opposite of where the mouse was going so this will open up that possibility because we're going to sort of focus everything based on the middle and my so we're just grabbing each button and then we're doing the offset width so it's finding the width and the height of the button and dividing it by two so that number would give us the center of the element next what we're going to do is find out how how far away the mouse is from the center on both the X and the Y AIS so to be able to do that I'm going to set my offset X and my offset y so how far are we and this is always going to be offset from the middle so for this to work I guess we could even call that like middle offset if you wanted to so we're getting this is where we're using and actually I wrote E before and then we came in with our event so I'm going to make that event uh we're going to get the offset X and offset y of the event and what that means is when we're here it's going to be looking at the top corner is the offset is 0 0 so when my mouse is going on top of something actually let's find that well let's look at that it's a lot easier to explain uh through that so we're going to do a console log and yeah we'll do a console log of the event offset Y and X so we can actually see what's happening here so I'm going to do an inspect on that and we'll go over to my console and now when I'm on top of here nothing is happening why not nothing's happening because I called this mouse mouse instead of mouse move hopefully some of you caught that while I was doing it so with that in place if we come over to here and I do my inspect uh in there we get all of a sudden you can see some stuff is happening and as I move that around it's showing where my offset is so if I go to here in the very Corner uh we can see that as I get there we're sort of at a0 0 and then as we come this way we're increasing all the way down to the end there so it's just showing us how far away from the top left we are but we also know where the middle is so that's why if we take these let's just move this down here and then let's change this to just my offset Y and offset X so now it's going to be doing this math here uh and it's going to be giving us those so if I come in and take a look if I'm in the dead middle now we're getting our 0 0 is right in the middle of the button and then as we go this way we can see it's going more negative and as I go this way it's becoming more positive so the 0 0 is directly in the middle which is exactly what we wanted to so that's a good start right there now how do we pass this down to move that pseudo element around and for me the easiest way to do this is with a custom property uh once again we've been using a lot of them and so we're just going to come in and I'm going to bring this in right here where I'm going to set each for each button we're going to have a style and we're going to set the property and I'm going to call it X motion and Y motion and then for those they're going to be our we're going to use that offset X and offset y values that are here and we're just I'm just adding pixels to the end here CU we need to have a unit for this to be able to work pixels will do the job perfectly cuz that's the distance where measuring anyway this is going to be way too big and there's two options here one of the options would be to divide this number and make it smaller at this stage and then it's always sort of locked in and that's fine I'm going to be doing that in the CSS and I'll explain why I'm deciding to do it that way but I'm going to play around with that on the CSS side of things so to make this actually work uh there's actually two different ways we can make this work too uh and this is that fun thing that I said I learned um and I actually I broke I broke my brain around this for a little while and I'll talk a bit about how I found the solution because it was somebody else who helped me out with it so I'll give them credit where credit is due uh but before we get to that yeah what we could do here and this is sort of where I was first thinking about it this would be on this part here where we have the translate that's already happening now what I'm going to do and this is a cool thing and this one I've known for a little while now that you can do and remember I said you have transforms and then you can do a translate there or we can now have this as its own property but what's really interesting you can do both so we can actually come in and do a transform and do a translate here as well and it's going to keep this translate that translate still doing its own thing and the second one is just manipulating it from wherever it was already which can be really really useful and so for this one we can close this down we don't need that we want to come here and it was the translate would be my VAR y whoops this way y motion and then we can just copy that put a comma and then it would be my X motion the other way so we're passing those numbers that we're getting from JavaScript into being custom properties and look at that there we go so you can see the movement is in the wrong direction right now and it's way too big right uh but at least it's working we're getting this interaction that's going on and because the translate and the transform are separated from one another the advantage here is that uh like if I'm right in the middle of this if I can get there but if I'm basically in the middle it's going to sort of did I put these the wrong way around left and right is going up and down I think I did the the wrong way around X is X offset withd feel like I did them the wrong maybe it's the other way around X is the the first one and Y is second I thought it was the other way but whatever um yeah that makes more sense left and right are going left and right up and down are going up and down okay I put them in the wrong order um but yeah you can see if I'm dead center in the middle we still have that little offset that's coming and it sort of follows us around so it's never perfectly centered but of course the offset is way too big but the other issue is and we're going to see this exaggerated now like if I come on here see how it's jumping to where the mouse is cuz we told it to follow that Mouse position and so this is where I got a little bit stuck and I was going to come in with some a JavaScript solution basically to help ease the positioning of it a little bit that I really didn't like um but that's where Matthew marote uh wrote me back I I talked about it on Twitter uh and he linked to this code pen we're going to use the solution that he shared here which is stolen from Anna Tudor um you can see here and it's this idea that it will animate to your mouse position and then we can move it around and it follows the mouse and then it will animate back to wherever we want it to be and it's super easy to do so thank you uh very much Matthew for for helping me out on that cuz I knew there would be a trick to getting this to work and I was breaking my head over it and I'm really happy that I didn't have to come in with something overly complicated to get it to work so the way to do this is instead of having this as a transform like we have here uh which makes sense sense we're still going to keep it as a transform but we're actually going to come down here and we're going to create some key frames so we're going to do a key frames of enter and we'll uh yeah we'll duplicate it once we're done so we can say uh from so this the from is your starting point it could also be a 0% if you'd prefer and this will just be a transform of translate and we'll do our Z 0 cuz that's you know normally we want it just to be in sort of the default starting spot let's save that so it's not moving so we want it to start there but if my mouse comes here it's going to start there and just sort of animate over instead of instantly jumping there and then we can come in with our two so that would be the 100% if you prefer using percentages here and that's where we can use that transform that we just created before um and I guess we could break this onto multiple lines cuz it's a little bit long and so we have exactly what we just were looking at right there and that's my enter so we're going from zero to having that and then what we're going to do is we're actually going to come and duplicate that and we can come in with an exit here and we do need you can run animations in Reverse there's no issues there the problem with running an animation if you have an animation on something you need to change the animation name if you want it to do something different basically uh so instead of running it in reverse all we're going to do is take this from here and we're going to move it down so it's after and we can start this as our from and make this one R2 and you don't actually have to move them um the order doesn't matter it's the keywords that matter or if you had zero and 100% it would work the same way so it's going from wherever our Mouse is and it's animating back to the there so when we exit we're going to do this animation so first let's do our enter so when we hover on there we're going to come in with that uh animation so we just come here we can add it animation and that was our enter it will be a forwards and it will take our VAR transition speed is it transition speed I forget what we called it ah yeah so you can see it it now before let's just take the I can't take it off now um uh but or actually just put it to zero seconds because this is effectively what it was before we had Z milliseconds so it would instantly jump when we were doing it now when I do it with the um transition speed on there you can see it actually animates to where my mouse is but it jumps when we come off and we and here it just follows it's so good uh so it it just follows our Mouse and then it comes off so it's perfect but when we come off we want it to do the same thing so all that means is we add that animation to the normal State we go find where that after was uh right here the after so this is the one when it's outside of our hover State and we can just come here and add the animation exit and for uh forwards once again and then the VAR animation speed which I already have here so I can just copy and paste it and hit save um and now look at that it works so now you can see it follows my mouse when I come off it animates back to there and when I come on it's moving around of course we're moving around way too much so uh this is where we can come in with a few different ways to solve this problem I personally think it's kind of cool to expose this one so we're going to come all the way back up to here I'm going to bring these together um just cuz it's spreading things out a lot but I'm just going to come in here with a motion Factor you can call it what you want and I'm going to do a 0.1 uh and you can put a comment here of maybe like a zero to one you can do comments and a few of these actually could turn into um like this is also 0 to one the opacity here is a 0 to one uh and then we have these I think it makes sense the frostiness is sort of a 0 to one the blurriness we could turn into a 0 to1 scale with some Cal so depending if you want everything to be that or you could just comment on the ones where a zero to one would make the most sense completely up to you um and so what we'll do is we'll use that motion Factor uh down where we were doing our animations and this is where it's a little bit CL um confusing I won't it's not confusing but it's just it adds a lot more information here instead of doing it in the JavaScript but the reason I like doing this again is it's related to The Styling I'm sort of passing in the offsets and then the CSS is figuring out what to do with it if you prefer doing these calculations in the JavaScript it's fine but I just have so many different things up as custom properties now that I can manipulate and change that I find it weird if one of them was over in the JavaScript where I'd have to go and find it and change it there so I like the idea of just taking the raw numbers passing those raw numbers into the CSS and then having this be the area where there's changes and manipulation going on and making it easier to change those things through custom properties um and everything else like we're doing so all that means is here where I have these two I'm going to come on both of these uh that are right here and we're going to come on both so I'm just going to use alt to put my uh Mouse on both of them we're going to do a calc I'll select all of that and then we're going to do a multiplied by the VAR of my motion factor and then we're going to do a * -1 to make it a negative number so now uh and the reason you want it we wanted it as a negative is so it's moving opposite of where our mouse was so if I go down it goes up and now it matches the original uh design that we had and once again we come up we can just take a look at how and I guess the motion Factor could be more than one um so we go back to one it's going to be back to where it was which is really extreme and kind of annoying uh but you know we could come in here and do a 10 and it would just be kind of crazy so I guess the 0 to one comes off um but I would re I think 0o to one is the safe Zone and after that things will get kind of nuts um but if you want more movement a you know a 02 W who whoa whoa I broke something there um so we'll fix that in a second but the the0 2 oh I know what it is I I know what it is okay we'll fix that in a second um but here the the point 2 you know you get a little bit more movement three you get more and everything so you can decide how much movement you want how subtle you want the movements and control that through this which I like I think it just makes sense to do that the mistake that I made was I made that transform change here but I didn't make that transform change right here so we need it in both the forwards and the backwards and then you don't get that crazy weird thing going on and it works perfectly I'm super happy with that I hope you enjoyed this video as well a very big thank you to both brilliant for helping support my channel as well as my enablers of awesome Philip Andrew Simon and Tim and all of my other patrons as well and with that of course until next time don't forget to make your corner of the internet just a little bit more awesome