Can I recreate this animated gradient button?

Key Takeaways

Hello, my friend and friend, and welcome back for yet another video. Or just in case you're new here, my name is Kevin. And here at my channel, I help people fall in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And today, we're going to be having some fun cuz we're going to be uh yeah, fun CSS stuff. Um where a user on my Discord server, his name is Priyank, I believe I'm saying that correctly. Hopefully, uh he shared this website and said, "These buttons look pretty cool. Uh, and can you recreate these or look at how we can recreate them? Uh, this one on the hover, it turns into the bordered effect. This one is the inverse effect right there. And yeah, I think it does look really cool. I want to apologize cuz it's taking me a really long time to get to this. I suggested this months and months and months ago and uh I needed a new video to ring in the new year and thought this would be a fun one to do. So, we're diving in. We're going to be having some fun recreating this. And I'm going to be doing this as part of my can I build it series. So it's completely unplanned, unscripted. We're just diving in and seeing what I can do. And I'm going be sharing a lot of my thought process as we go through things in like okay, you know, the designer team gave me this. How would I create this? And so a lot of this video is cool CSS stuff, but also breaking down how I would actually approach a problem like what we can see right here. Uh, and trying to talk out loud through all my thoughts as we're going through it. And just really quickly, speaking of being a new year, well, first of all, welcome. Welcome back to the channel for the new year. It's kind of weird because I re-recorded like a month and a half or 2 months worth of videos. I haven't been recording in a really long time, so it feels a little bit weird uh to be back here, though. Comforting in a way. Uh but you might also notice things look a little bit different. Maybe I got a new chair. There's a headrest on this one. And I just want to say a really big thank you to the Autonomous team. This is the Erggo Chair Pro uh that they sent me and they somebody on their team was like, "Hey, we noticed in your videos it doesn't look like you're using an ergonomic chair. Uh would you like to try this out?" And I was like, "Okay, sure." And so they sent it to me. I've been trying it through all of January so far, which hasn't been too long, through a bit of December as well. And so far so good. Uh I'm really enjoying it. My wife has walked into the office a couple of times now and been like, "Your posture looks a little bit better uh than the slouching that I used to do in my old chair." So, I think it's doing the right job. And if you're in the market for a new chair to ring in the new year, I definitely would recommend checking it out. Uh, but yeah, with that, let's let's dive back in here. Uh, I have created a bit of a code pen already, but there's nothing really in here. Um, I've put two buttons and I've put them in the middle of the page, and I made them big so we can see them. So, that's it. Uh, so yeah, the the finished code for this this code pen will also be down below. Uh if you want to poke around at the code, not showing the starting code because there really isn't any here. Uh so what do we want to do? We want to let's give them the right shape. And anytime I have a problem like this where I'm trying to figure things out. Uh actually I'm going to do one thing. I notice there's a scroll bar there that's bugging me a little bit. Uh let's just say margin zero on the body here as well to get rid of that scroll bar. Perfect. Uh, so yeah, anytime I have a problem like this, I do the easy things that I know how to do first without having to stress about it, just so I have progress and I'm not just sitting there scratching my head wondering what to do. Get the the ball rolling a little bit. Like if you're going to the gym, you're going to do some stretching, warming up first. That's sort of the idea, right? Uh before we dive into like the parts where we actually have to use our our brains a little bit. So the first thing I guess we do is uh add Did I spell gradient right? looks really weird, but okay. They're the same. That's all that matters. Let's add some padding. Lately, doesn't really benefit a lot, but lately on my padding, I've been doing something like a.5 or 25 maybe LH for the top and bottom and then like 2 CH for the width. Um, it tends to give me the nice shape of a button. You could easily use AMR here. Um, but this is like relative to the font size. So, I change the font size, it will grow with it. Uh, kind of magic numbery, but these numbers work really well for me. So there we go. Uh, so that's my padding. And then we're going to do a border radius. You just need a really big number. So 100 VW is always going to be bigger than we ever need. Uh, and we get the pill shape. For now, I'm going to say border zero just so they don't look terrible. But we're probably going to come back in with a border on these. Um, okay. That's the easy stuff. Now, what I need to decide is we need a background on them. I need to decide let's let's go look at the original ones. I need to decide if we're going to be doing this with pseudo elements or if we're just going to be doing it on the element itself. My brain first goes to pseudo elements and just layering them to get what I need. But I know sometimes that gets me in trouble. So, I'm actually gonna try and do this um without pseudo elements. I'm making it a bit bigger uh just because I think it's going to show the effect a bit better. Yeah, we're going to try and do this without pseudo elements and see if it's possible first. Uh so, gradient button. Ooh, no. See the Okay, we could do it without pseudo elements, but the problem is see how that one like and it fades in from the middle. Okay, I think I could do a lot of this without pseudo elements and I don't know if I want to refactor after um cuz that effect where it sort of like comes and goes based off of the middle is really interesting actually. And I think that would require a pseudo element. I'm going to do the gradient without a pseudo element. And then we're going to talk about different possibilities here of what we could do. So let's set up a background. We'll do background image cuz that's what it's going to be. Um background image is going to be I think they're all like radial gradients, right? That's what it looks like. And it looks just looks like there's a bunch. So, let's just do like a pink to transparent. These won't be perfect, but I just want to get some some gradients in place. I'm in code pen and I don't know if there's a shortcut to duplicate a line of code. If there is, please let me know in the comments below. Um, so let's say pink. My background image is also not working right now. Maybe cuz I need to do that. Okay, it is. Okay, so we're going to say pink to transparent. Let's say blue to transparent. yellow to transparent and maybe an orange just to have some colors in place. They're all overlapping each other which isn't great. So, they need to have different positions. And what I was wondering here, okay, easy wins first. We're not going to worry about the animation. So, let's are let's say they're all circles. So, I'm going to say circle at I don't know 10%, 10%. Does that work? It does. And then let's just copy this then. And we'll just move those percentages around. So, we have this would be at like 50%, 50%, which is the middle, maybe 70. Um, and then this could be like a 30 70 or something just to have some different numbers. Move the gradient around. gives us a bit of an effect. So now, okay, first option we have, I could come here and say at property, and I'd have to register this. Uh, we're going to call this one button fill. And this is where I think this will get turned into a pseudo element, but I want to show that this is possible. Uh, so the syntax for this one, if you haven't seen app property, it's a way to register custom properties to tell CSS the type of out or the type of value that you're using cuz custom properties can literally be anything. Uh, and CSS doesn't know what it can do with anything. But CSS is a typed language. Uh, meaning that like this is a length unit. This is a length unit. Uh, this is a percentage which can also be a percentage length. Uh, there's different stuff. There's um degrees, which are angles, there's colors. This is going to be a color. So, my syntax here is going to be color, which we do like that. Uh, I'll put a link to the MDM that has the whole list of the different things you can have here. You have to say if it inherits or not. We're going to say that it is true. I forget if that needs to be in quotation marks. I don't think so. And so, inherits is true. And the last one is the initial value. So, initial value will be black. And then the last one here. And I'm actually going to change this from background image to background. I think um it won't really make a big difference right now. But the reason I'm doing that, I'm just trying to think if the order I think we want it at the top. I I think the order that the gradients are overlapping each other, the one at the top of the list is actually at the top. So here we're going to do a we're going to say conic because it's we're saving one character by saying conic gradient over either a radial or linear gradient. And we're just going to say that it's a var of our button fill button fill. Uh there we go. That's it. You only need to put it once and it's a single color gradient. Uh you can get a bit about you know you could do this if it's just more straightforward for you. Copy paste paste. So it's like you know a conic gradient from this color to this color. Uh but you can do it with a single one. Uh you can also do like I think it's a 1 one something like that. Uh this is 1 0 I forget comma 1 0. There's a way of doing it that I've talked about in other videos where they were scripted or at least pre-planned where uh I look at sort of this. I'll put a link in the description for that. U but there we go. The button fill is coming in on top of the other ones. But I want to see the border. I want it to have that border effect. So, I'm going to say this is going to be like a I don't know. 2, no, let's do 10 pixels. Let's just say 10 pixels solid but transparent cuz I don't want to see the border. Everything got bigger cuz I'm not doing box sizing on here, which is fine uh for our purposes today. And then here I want to write padding box. So, it should stop. Aha, it worked. So, you can see the gradient is coming underneath it. So what we're saying is the fill is only filling up sorry this conic gradient here is only going as far as the padding box. So then this is coming in as a border uh that we can see there. Now it looks really funky and that's because the radial gradients here are filling up all the space but they do this pattern like the background repeat actually has them repeating under the borders cuz normally you don't have a transparent border. So that just means that we have to tell all of these ones. So, we'll just go on all of those and we're going to say that those are all a padding box. Uh, not padding box. Whoops. All of those. And say those are all a content box. Uh, which content box is also wrong, Kevin. This is my border box. There we go. Okay, we got there in the end. Uh, and now we can see them and the gradient is sort of filling in that space. Now the reason I wanted to do and this is the first thing that came to my mind is because if we have a registered custom property what we can say is our uh button or grade grad gradient gradient button sorry for the flashbang there that is also bright for me. uh hover and the gradient button focus visible is going to have a button fill. Button fill will become transparent. And this is the advantage of registering a custom property is you can do something like this and change the value of it, which isn't magical. You can do that always. But what you can also do then is say that we're transitioning the button fill, which looks super weird when you're not used to doing something like this. Uh, but now that actually transitions back and forth. Oh, it's so satisfying being able to do something like that. Uh, so this is act like this would definitely be first draft worthy, I think. Like that's pretty cool, right? Uh, now we do have the bordered version versus the non-bordered version. Looks like I created the bordered version first. So, we're going to do a little flip here where the initial value here is actually going to be transparent. Transparent. Uh, and then this will change to black. And obviously like I'm using pink, blue, yellow, orange, black. Um, but yeah, we get the full version that becomes a border. And then on my gradient button ordered, oh, another flashbang, apologies. Uh, we would just switch this around. And I'm actually wondering there's probably like a more optimal way we could do this, but again, this is a can I build it. So, we're going to try and get it working first and then potentially refactor. We'll see if we want to bother. Uh the button fill will be black. I think I'm going to do this. The button fill. Yeah, I know. I'm going to leave it like this. Um I was thinking of like do I put this as a custom property, but then button fill Oh, yeah, we could do this. is my var button fill hover comma black. This will make it a bit easier to to do uh to make variants of. So button fill on hover focus will look for a custom property called button fill hover. If it can't find a button fill hover, it will just default to black. Uh we don't want black though. We want it to default to transparent. Sorry. On like the regular one, which is the one on the right. On the bordered one, our button fill will be black. And our button fill hover will then be trans. Uh, I'm getting this wrong. Black. And this should be black. I'm I'm sorry. Uh, let's just see if this works. And then we can break it down a little bit. I've I've broken everything. This one is working. The bordered one is working. Um, the default value for button f Oh, I got them. Okay. Button fill transparent by default. That is good. This all makes sense. So the one here Oh no, that one is working. Okay, our regular one is working. My bordered one is broken cuz this should be transparent. No, no, this isn't working. My hover. I'm so confused right now. Mixing myself up so much. I'm going from black and then instead it's going to go up to transparent. Oh, interestingly that's not working. Oh, I know why. This is one of the fun side effects of custom properties because it can't h wait bordered. Let's just take a quick look here actually my custom properties. I'm sort of thinking this is one of the side effects. So buttonfill hover is here and it's good. If I go to my hover and I say hover, I can see here the button fill is being crossed off. Oh, that's because it's just going to black. I'm overwriting it. I'm overwriting this entire thing with this line uh with this line right here. So, this is literally doing nothing. So maybe what I should do is change the names of some of these a little bit to make this possible. Um I want my button or do I just I mean the simple solution here button fill looks for the hover goes to black. I is this the best way to do it? I I think this is the right idea. My My I told you I haven't recorded in a long time. We're just This is the first thing I'm recording since the holidays. My brain is not firing on all cylinders. Um so I think for now I'm just going to do it this way. of a uh let's just make it a bit faster is hover comma focus visible just so I don't have to write it twice uh and then we go transparent this is definitely like the easier way to do it uh button fill is hover oh and do I have my dev tools open still close there we go okay so we solved it and now we have the buttons working super duper okay I'm happy with that now it's not perfect because it doesn't have that row effect from the middle. But like if if we needed something quickly that would work. Uh the other thing is we we do need to update the degrees. And I'm trying to think if I could do this with a single singular. I think we could do this. So let's just say this is going to be my um gradient location. We're going to do this as a percent. I think it's percentage. If you want inherits true initial value will be 50%. I could definitely do this with a whole bunch of registered custom properties like one for every part because I need these to move right. I need them to animate. Um I could also do this with background position and not have to do this. Is doing it with background position easier than doing it like this? I'm going to do it like this just for academic purposes. Background position might be the simpler approach to doing it. Um, but what my idea would be here would be to let's do var you know what I'm trying to think background. Okay. Gradient location. Yeah, we're h No, we won't be able to do what I was thinking. Maybe if I do so I mean Okay. Okay. Let's do my first thought. I said we're going to walk my way through it. This is what my first thought was. Var of no calc. So calc var gradient location location. Oh, okay. Uh, I think we're going to do this differently after, but let's just start with this. And then I could do it like a* 2. And then I could do the same thing, you know, for this one. Time two. Uh, and then I could reuse these over here. Now, I'm already not loving this, but let's just say this is like a divide by two. You could do like pluses and minuses on them. Um, the problem is this would be a singular animation, right? So, you can see everything has changed now. I don't know what the locations are. Let's just try seeing if this would work. So, at key frames, uh I've started naming my gradients this way. This is from um I'll remember his name in a minute. I apologize if you're watching. Uh uh Roma uh Karov um who suggested this. I think it's a good idea cuz like custom properties are named this way. There's other things that have to be named this way. just naming anything that's usernamed with a double hyphen. You do not have to do the double hyphen for your key frames, but uh it's something that I'm trying to do. So, gradient uh location can be a let's say two or 50% will be just to show this works because I don't think it's a good idea. We're going to do a 0% uh 10%. uh that would be my gradient location would become 10%. Uh and then we should be able to take an any animation of gradient location. We'll just say 10 seconds and I think that will work. Yeah, you can see it's actually it's moving. That's probably too too slow compared to what they had. And I think based on the numbers I used like my multiplications, divisions here aren't necessarily the best. Is it working? It looked like it was working and now I'm not sure. Oh. Uh, let's do uh alternate infinite. My mind is playing tricks on me. I don't see anything. I out of the corner of my eye, it looked like things were moving. And now it's definitely not moving. Let's just go take a a quick look because I feel like it should be working. Did I do that at the right place? I did. um button gradient animation gradient location. So let's just see here initial values good. Oh, you know what? I might calling the gradient location the same as this could be a gradient movement. Uh having the same name for those is not a good idea, I'm guessing. Oh no, this one's okay. And then the animation is my gradient movement. But clearly this was a failed attempt. I think I'm in like the right idea. Um we're going to play around with this a little bit. Um but this is really where I'm debating whether I want to do background position now or not. Um cuz background position it would still have to be done with an animation with the way it was running. So either way I'm using an animation and either way I need all of the positions to be changing. I just have to decide is it worth doing it through the positioning of each one. And I would get rid of the calc if I was doing this. Um, so let's get rid of the calc for now and think about this a little bit more. So I think yeah, let's just try doing a one. This would be a two. And like this could even be like the X and the Y. This is where the position background position makes more sense actually. Uh because if I did these as custom properties ideally like they're moving independently of one another. So I need to for each one of these it'd be like my X and then my Y. That's a lot of custom properties to have to map for something like this. Uh so I think let's go back. U I don't remember what values I used but it doesn't really matter I guess. at 10% 10%. Uh, and this one was was it 50%, 50% or something. Okay, so that was a failed attempt. We're back. Let's get rid of our gradient location. Uh, and then gradient movement could be our We're just going to say at 50% our background position. And then we just have to move them around. So, for now, let's say we're going to do top left, bottom, right. Oh, you know what? Maybe all this might actually be easier if we just do all the circles at the same place. So, they're all just overlapping. Um, bottom right. Let's just try this. Bottom, top left, bottom right, bottom left, top right. just so we have like a list of you know each one is getting placed somewhere else. The animation gradient movement it should actually be working now and I don't see it working. Let's just take this off. No, I've done it with that before. So yeah, it's not that wasn't the issue. My anim animation at key frame. So, the the first thing I was looking for is direct at animation here, cuz I've done that a lot of times. Uh, let's go back in here and look. Wow, this is a a disaster. Um, but I think this is useful for people to know that like Oh, the background positions are working. Look at that. It was working before, too, cuz I noticed in my dev tools things were moving. So, something was doing something along the way. Uh, so my background positions are updating. I can see that. But we don't actually see Okay, let's try with let's turn off our gradient our animation. So, we know the background position is actually animating. Um, background position. Now, I'm wondering position top left. That's the problem. Um, background size. Let's just say 50 pixels. 50 pixels. Oh, this is the short hand. Oh my god, Kevin. I'm coming with the background shortorthhand. And now let's put the animation back on. This will look interesting. The short hand was overwriting the long hands I was using. That's so stupid. Let's turn this off. I might actually want a background size, but we'll see. Apparently, I need a background size as well. Um, I might do something like 50%, 50%. I don't really care about the shape too much if that stretches it in a weird way. Uh, background repeat of none. Oh, not no repeat. No repeat. And now, ah, I see the problem now. The background. Oh, this is weird with the border. That's a side effect I wasn't expecting. Oh, yeah. That's okay. Anyway, that we'll fix that in a second. We're getting off. This is a fun dive into this. So I do need to actually go back to my original idea to a certain extent. What if this was actually 200%. That works better. And the initial background position would just have to all be different background position. So, we'd want something like bottom right, top left. I'm just inversing them. Top right, bottom left. And then it wouldn't be exactly what we want. That would work. Oh, okay. That's kind of cool. I'm happy with that, actually. Um, I'm going to change my pink here to be like a deep pink cuz it's going to be a bit brighter. Let's change. Now, the other problem is I'm not because the pink one is on the top. I'm not really seeing the other ones, though. Uh, let's go back to look at theirs really fast. They have more of like a mesh style going on. I know they're looking at adding sort of mesh style gradients in a little bit more, but part of what they're doing here is clearly moving things out of the way more at times. Uh so maybe what we want to do is this could be at like 25% and then a 75%. Now you don't have to do it with these these stops. Um but let's just say back background position uh is going to be so top left. I'm just wondering if I should keep those values. I might keep some of them. Um, but I might do something like a negative 100% negative 100% for the first one. The next one could be like a ne 200% 200% just so it gets out of the way. Uh, then this could be a 50% 50%, it goes to the middle and then this one's like a 0% 0% or something. So, it's in the top left. Um, let's see what that gives us. Oh, that's funky. Cuz we're seeing the edges of the non-re repeating gradients as they move too far off. If I wanted to do that with these large values, I'd have to make this even bigger, which I think is going to cause even more problems. Um, which makes me think that it would actually once again be better. It's so funny with the the black, too, cuz I could I could get the the black. I don't need to have background size for all of them except the f Oh, I'm doing the P. This is the first one. Uh, so the first I have five and I kept forgetting that. Uh, this would just be center, center, right? And then I'd want to keep that the same all the time. I forgot about that one. Center, center, center, center. That one just never moves and the other ones would move around it. Does that work? Okay, at least that works. Uh, but there is that like funkiness going on outside of that. Uh maybe there's a way of doing this that doesn't break this way. But I'm going I think we need to go back to that original idea I had of the location of each one moving there. Is there another way I could do that? Oh, okay. Wait, maybe the only other idea is the size of the circle. and I forget. Let's turn off all of these extra ones for a second just so I have one that I'm looking at. Uh, which means a semicolon has to go to the end here. So, we just have the one. Let's change the size away from 200 200 just so we see what it originally looks like. And then circle 50%, 50% would be putting it in the middle. uh at at 50% 50% but there's a way to also give it a size right so if I did this at like I can do this with pixel values too but like zero that's okay but comma I always forget how to do this with circles I might have to look it up 200 or say 50 pixels 50 pixels circle I every time I want to do this I for 50 pixels 50 pixels at 50% %. Nope. Um, there is a way to do this. That's what it was. Okay. It doesn't make sense to have two sizes. It's a circle. There's only one size to it. This might be another option. Oh, this is this is probably what I actually want to do. Let's bring Whoops. Let's bring the other ones back in. Okay. Circle. I have a comma back here. Now, just know if you're ever doing gradients, you can't have a comma at the end. Uh you you need you can't have a trailing comma. Like if I put a trailing comma here, it breaks it. It's so annoying. Okay. Um Okay. So, maybe this is a better solution. If I did this, maybe 50 might be a bit small, but let's start with that. And just this is proof of concept. Once again, I'd bring those in. You're going to say they're all 50%, but the locations will be different. Maybe these should actually be I think let's just say 25 75. This I think is a better solution. Uh this is going to be a 75% 25%. Um, and then this one. And I'm I think I have a trick here for the end. Let's do this one at like uh I guess it could actually be 50/50. Right. So, we have like all of our colors. And let's start with these and see if we can do something with this. Uh, now I'm really wondering, do I need to like these are going to get animated. We can't animate a background or a gradient. So that has to make them custom properties and the custom properties will be animated. That is fine. Can I do it in a way where I only need to register one custom property or do I need each one of these values to be a different custom property? because I could I could do them all as one. So, the problem with doing it as one custom property is if I want to move things in different directions, that doesn't really work. I could do it. No, that didn't work. That wouldn't work. That wouldn't work. Um, is there a way to do that? I don't think so. I think I just need to register them all. That's fine. So, let's register. We're going to do this with one set first. So let's just say that we're going to have our at property of uh we're going to say rgx our radial gradient 1x is going to be an initial. We'll start with syntax syntax is a uh percentage. Maybe this is what I got wrong before. Maybe it's not percentage. Uh inherits will be true. initial value. We'll just go with my 0%. And then we're going to duplicate that. If you can think of a better solution here, uh please let me know in the comments. Uh and I had this one at I think at 50%. And then I had this one I think at a 50%. Uh yeah, so 50%. So then my animation gradient movement is going to have all of these in it. Uh, so let's take off all of this. For now, I'm just doing the 50%, so it's the middle. And that will be my radial gradient 1 x. Or did I do x1? Oh, I did a 1 xy up here, too. 1 x and a 1 y. Okay. Radial gradient 1 x is going to go from zero, let's just say 100%. Uh, and RG1 Y is going to go to 10%. Just so something is happening. Then I need to bring these here. Var radial gradient 1x and oh, it's working. Fantastic. And two. Okay, we got there in the end. We got something working. Uh, so that one. Oh no. Oh, whoops. That's a one Y. We broke things. Nice. So, that one's now moving back and forth. Now, that's kind of not fantastic. So, I think this would be like a 25%. Uh, and then we'll do three stops maybe for each one of them. This part is one of the things I might edit a little bit. Let's just do this. Uh, it goes to there, goes up, and then I sort of want it to If it goes up and let's just say this goes to like 70 80 uh 10 20. Let's just see what that movement looks like. It's going to go across that way. Oh no, that's way too similar to what we had before. Oh, and then it's Whoops. Oh, that should be okay. 100%. I know. 75. This would be a I don't know 30%, 80%. I just wanted to like move around a bunch. Let's see what that gives us. Oh, that Okay, so this it's moving around a bunch, but I don't like how it's like start and stopping and then doing that crazy thing at the end. Uh so for that hm so the pro 25 5075 that makes sense and then it's like flying and then bouncing at the end. Um I'm wondering if we can do linear but I think linear is going to look really bad too. That's what I was. It's sort of like it's like the the DVD thing bouncing around. Uh and depending on the distance it's covering, the speeds are different. This is where I wish you could ease like the like if I do an ease in out, this is sort of what it originally would have been, right? Where it goes to the it's like easing in and out of each stop. Now, there is a way to combat that, but it's complicated, and I'm wondering if it's worth it. Um, where you actually end up with, um, like what I could do is I could have this one is my 50%. Here, okay, I'm trying to remember how you do this. essentially you'd have more than one animation running on it. Um, but that could cause a conflict. I'm just trying to think I mean we did see this in theirs as well. You can definitely see like there's like the solid like it moves and then it moves and then it moves uh that that we're getting. So that is something. Okay, I'm going to leave it like that for now. We're proof of concept, Kevin. Proof of concept. This is gradient movement. Uh yeah, we can actually Okay, that will be fine. Let's let's get them all moving. Uh so we can do this as my two and two. I forget what my initial values were. 2575. We'll just do a 2070 for speed purposes. Uh we're going to do our three and three which were initially 7525. So once again we'll just do a 7020 and last but not least our four and our four and that I had it 50/50 right I think as the initial values. Uh then we can just do this really fast. Copy that. Bring it all in here. Paste. This becomes my two. This becomes my three. And this one becomes my four. Okay. Then um the 50 pixels here. I think we're actually going to make them bigger. Maybe that's going to be too big, but we're going to try that. Uh I think actually The sizing here might change 70. Um, this one can be like a 90. This might not be what they did, but say a 120 and then a 150. So, we're sort of growing as we're getting further toward the back. Uh, and they fill up more space. I could be wrong on that on on how um, but it might give us So, it's 1 2 3 4. It might give us a bit of an interesting effect. 2 2 3 3 4 4 and let's just make this 2070. This is going to look crappy at first. Um, but we'll see what this gives us. Negative 120 or something. Just so things are moving around more. Uh, and let's see what happens. The yellow one is so dominant and the blue one is essentially not moving. Which one's the blue one? Blue is number two. We're going from number two. Number two, we're going from 2070. Oh, we're going from 2070 to 2070. Uh, okay. Let's make this one 120 50. I don't know. Just so things are moving around. Okay. Now, what I'm actually thinking, because everything's moving at the same time, which looks kind of weird. So, what I might do is at like 30%, this one goes to here. At 50%, we could leave that one there. At 70%, we would do this one. And then at uh 30 I guess 40 50 and then at 60% we could do that one. Let's just format this. Uh just so the movements are sort of happening more independently from one another. That already looks a lot better actually. Uh, we could also do something where maybe then here at like 70%. We're throwing in I don't know if this is going to work. Let's just sayund uh10 and the RG2 was at 50. Let's say this goes to like a negative 20. I don't know. I'm just trying to add in like a little bit of extra movement at one point along the way. Yeah, that looks better. Uh, the yellow one's still like way too dominant. Part of that could be the Oh, that's that's pretty neat. Maybe we come in with one more. Uh, or even here, maybe at the I like it that they're they're happening at different times. A lot of the movements like some of those movements are the same, but then they break apart. So maybe here at like a 45% we also throw in uh the four can get something different. This is pretty drastic. Four is the yellow one. 10% 10%. I don't know. Just to try and get it somewhere different. I don't see the orange one at all. Do I have an orange one? I'm only seeing three colors. Orange is here. Let's just make this lime. Ah, there. The orange and the yellow are just blending in way too much. Okay, I'm a lot happier with that. Except the lime. Oh, the lime is actually the fourth one. Uh, it's jumping way too much. Probably with what I just changed there. Uh, okay. And this isn't 100% perfect. I'm actually wondering I also I I have a feeling like they look very circle gradienty. If we go back to theirs, they're much more like meshy feeling. Um, I'm not 100% sure on what they did and I don't want to look at their code, but I feel like we spent a lot of time working on that. There there's a few different ways you can do we could try there's some I don't think it's this would almost need to be multiple elements I think if we wanted to properly pull that off or there might be some SVGish type of thing we could do I think part of it too could just be the size of them um and not having them 100% solid but it could be like here the size of 70 pixels like if I made them all a bit bigger The only problem is if they're all bigger, you run that risk of like they look better, I think. Okay, we can go with that. That does just look better. I wouldn't say it's 100% perfect, but as like a first draft of what we're building here, I think it looks pretty good. Uh, one thing we're also going to change here is the color will be black. Uh, and the color on hover. We'll Where's my hover? The color here. Go to white. Oh, the black doesn't look fantastic either. Uh, and then this one obviously has a color of white that goes I don't know. This is just not choosing good colors probably. Uh I think white all the time makes more sense, but uh so you know what? If white always makes more sense, I don't need to declare it. Uh cuz that was the default color, right? I I would just have to choose better colors. Uh and then the black would be fine. The white text would be fine or the black. Either one. The the the colors I have are too vibrant. I'm actually really happy with how this looks. Uh, one thing I want to look at with theirs actually is if I hover on both of them. Okay, we're gonna try one thing here. Uh, would be gradient. Uh, I was making a new, we're going to say animation. We're going to do an animation delay of calc sibling index. This would not work really using a sibling index. There's other ways. Is there another way we could do it? This would work in this case cuz they are siblings of one another. Um, sibling index as new. The browser support for this is terrible, but we're we're having fun with CSS. So, sibling index uh times negative 500 milliseconds. Um should make them different. Are they? They are, but that's not enough. How long? It's a 5-second. Okay. Two 2,000 milliseconds. Again, this would depend on like how many siblings you have. Um, but there we go. I think let's just take off the bordered. And this should refresh the page without There we go. So, yeah, we can see they're in like different locations, which is cool. Uh, you could also change the colors of them as well, right? Quite easily with this type of thing. Uh, the reason I'm doing a negative animation delay is cuz that actually means the animation starting at like the whatever a negative 2,000 would be. If it was if you do an animation delay of 2,000 milliseconds, it doesn't move for 2,000 milliseconds and then starts. If it's a negative number, as soon as it loads, it's loading but at like or like halfway through the animation basically or not quite halfway through in this case. Um, but at least it makes it makes them different from one another. Uh, and sibling index is like this delay is 2,000. Uh, and then this delay would be -4,000 on on the second one. So there there's other ways you could approach this, but uh I think that's a fun approach that we can do. We'll add border to the second one just to change things up a little bit. Uh and then there's the last thing that overall I'm super happy with this. I think it we've got the spirit of it even if it's not quite as meshy uh as theirs, which again I think would actually require some SVG diffusion stuff uh and we wouldn't be able to do it with a background image like I've done here. I could be wrong on that though. Um, but yeah, I'm looking forward to if that mesh thing ever gets to CSS. But what are we going to do next? Next, we are going to update this button to also Oh, we want to do the the fade in. Like right now, it's fading in, fading out, whereas theirs, it like fades in that way, which is kind of neat. Uh, oh. Ooh. Maybe we can do that. Can we do that? Can we do that? Maybe. So, the way I have it set up right now, we're going to we're going to experiment. I I I was thinking we'd need a custom property that sort of blurs and reduces transparency at the same time and it would give us I think it would actually give us that effect. But this is our button fill. If we did this to a transparent or is it the other way around? I'm going to get it mixed I don't want. So, this would actually then be a I don't want a conic gradient. This would also be a radial gradient. Yeah. So, what if the transparent was actually at 0%. Uh, one second. 100% here. So that would still give us that same style we had, but instead of making the button fill go to transparent for now, let's just switch this back to black for a second. And what if this color stop switch to zero? So, okay, we're going to go back to the button fill because we're going to need the fill to switch to transparent. But as that switch is happening, we also want this number to shrink. Right? So, we we want it to go from the a stop of 100% meaning it's all the way out and it coming down towards the middle. So, this var button fill stop, I guess. Let's see if this works. I'm not sure. Uh, button fill stop. We could fix that if you had a um color. No, this would be a percentage a fallback percentage. And the initial value is 100%. That should fix everything. Yeah. Okay, we're back. And then on hover. Go all the way down. Our button fill stop will be 0%. I don't know if this is going to work. Yes. So, this way it works. Oh, wait. What? It's kind of Let's turn that off for a second. This looks good when it goes like that. When we do it like this, we're getting that awkward jump at the beginning of it. Oh, I know why. Trans and button fill stop. One second. That would help. Okay. And if that was a circle, maybe that's actually going to go a bit faster. Uh 0.5 seconds. 75. Let's try 0.5. We'll try five on that one instead. Uh, and I don't know if that's the right idea, but we also want to make sure that one's a circle cuz the shape of it looks I hate that it can't have the shape. And because I if it was a suit element, I could just scale it down and it would keep the right shape. Whereas this just gives us that really ugly oval. Ah, that sucks that I can't do it that way. Uh, would it work if I I don't think it would work if I made that a circle. It would just look probably even worse. Circle. Uh, it looks better. Still doesn't look I I I'm going to stick with that for this implementation, I think. Uh, cuz it still looks pretty cool. Uh, that it sort of shrinks down and fades out. Then we need the opposite to happen on Whoa, that's this is kind of trippy because like the values are conflicting with one another a little bit to get sort of a cool wave effect coming in which is interesting. It'd potentially be used in different ways. Um we're just going to need to make sure the bordered has a button fill. Oh, we're not using We are button fill stop is 100% normally and a button fill stop. No, it's the other way around. 100% here, 0% here, I believe. Let's try that. I broke Oh, I got them mixed up. the bordered one. One second. Turn that off and turn that off. The bordered one was already working before. So I actually had the bordered. So okay, go back. This was 100 100%. And a zero. I should have been focused on this one from the beginning. Uh which means this will actually go up to 100% and then the default value should be a zero. because the default one doesn't have a border on it. So that there we go. That one now works. And that one now works. Cool. So if if you'd want to take this sort of the just more similar to what they had, I would definitely replace the black with a pseudo element. Uh and then you could just lower the opacity, the scale, and and filter blur it or something like that. Or yeah, a filter blur should work. Uh, and that should, I think, work completely fine. That would be at least what my attempt would be. Uh, but I'm actually really happy with how this turned out. I would want to get rid of the yellow and the lime green that I'm using so the white text is readable. Uh, but within the How long was that recording for now? An hour. I'm That took me longer than I thought it would, but I'm pretty happy with how it came out. This video probably be a little bit shorter cuz I had a few staring at the screen moments that I'll have edited out. But I hope you enjoyed this. I hope you learned a few things along the way with it. If nothing else, uh, a very big thank you to my enabler of awesome, Johnny, as well as all my other patrons and channel members for their continued support. Don't forget to check out Autonomous if you're looking for a new chair. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome. Oh, and I also have other videos in this playlist. If you like this approach, uh, you can check that out. There should be a playlist on the screen now, and it'll be linked down in the description as well. Thanks again. Uh, bye. Screwed up the outro. story about that.