Recreating a Complex CSS Button: Step-by-Step UI Challenge

What's up everybody? Me and Scott are going to battle it out to see who can recreate this crazy button with CSS.

This is designed by Elvish Belha from Dribble. And I saw this thing. I was like, whenever I see a design like this,

I'm like, I got to I got to reimplement this cuz that looks super fun. So, we're going to give ourselves half an hour and

see how far we can get. So, what do you think, Scott? You ready to rock? >> Oh, you know I'm ready to rock. This

one's going to be really fun. We're not using our typical CSS battle platform. We're just going straight yellow on a

really neat design. And me personally, this is the stuff I love. This is how I like to work. So, I'm ready to go. All

right. So, what I want to do is first get my stacking in order because I'm I'm taking a look at this button right here.

And there's there's several items to it, right? You have this gradient border in the background, and then you have this

kind of glass. Then you have this black one. And then finally, you have this uh one around add to cart. Right. So, what

I want to do is first get all of my selectors in place. Um so, I'm going to go ahead and grab the button. I think

actually, you know what? I'm also going to set up all my colors. Gray is that color. I'm going to make a

padding variable. And I think that's good. I might just hardcode the rest. Okay. So, let's get rocking. And the

background is going to be a linear gradient. And I got to be honest with the linear gradient syntax. Two bottom.

I always goof up the two top two bottom stuff. I feel like Copilot is going to be I might turn it off halfway through

this video. Y'all, we'll see. W is making shapes with his hands. And Copilot's already driving me nuts. So,

we have our gradient. We're going to have a border radius on this thing. We're going to bump up the font size.

Okay. Okay, so here's the button and the text is going to have an opposite linear gradient. So it's also going to have a

linear gradient and the border radius on this one's going to be much more severe on the text. So this the uh text that

I'm doing on the inside of this is going to be this inverse spot. This is going to be the button and this is going to be

a pseudo element. That's how I'm approaching this. So what I'm going to do is I'm going to use CSS grid to stack

them on top of each other. And oh my gosh, here it's cursor is a bit aggressive. So I'm going to call it

button. So stacking things in CSS, you might have you might be going for absolute positioning. I'm sure Scott's

doing that right now. But if you want to stack things on top of each other without having to fuss, you just use CSS

grid with a literally a a one by one grid. Let's I'm going to have a selector for each one, right? Before, after.

After. put a little comment here that says this is the this is going to be the gradient. The

before is going to be the black button. The button itself is going to be the glass and then the span with the class

of text is going to be the black circle. And the border radius for this inside one uh looks pretty fine. I'm going to

add a padding down here. And maybe even I'll bump the font size out again. It's just hard to work in this space. And

change the top and bottom padding to something like 15% or 15 pixels. Bingo. Bango. Look at how close we've gotten

already. There is a box shadow on the button itself. And this is a pretty light shadow. It looks like it goes down

and not over at all. So, we're going to say it's zero. Yeah, zero for the X. And I I think this is probably something

like 20 pixels. 20 pixels as well for the spread right now. We'll do RGB 0000 uh forward slash 0.1 like this. So we

can kind of see it. It's starting to match up a little bit more. Why is my CSS not being applied? Oh, I forgot to

save my index.html when I put the style.css in. Okay, we're in good shape. We're in good shape. Okay, so after is a

gradient. Before black button is going to be a gradient from gray to black. The grid area is button as well. Now we need

some z-indexes to start stacking everything. So the text z-index is going to be two. The black button zindex one.

And then we're going to take that gradient and just reverse it. Right. So, it went it was

gray to black and we're just going to switch it from black to gray. Oh man, there's some interesting stuff here.

There's an interesting challenge with the conic gradient that I did not think about until now. The kodic gradient in

the example is actually rotating, which you might not see just from this image. It will rotate. So, um, if I want to get

that rotating in here, you're going to need the gradient itself to rotate and not the shape that the gradient is in,

which will also I I might add another element if we're being entirely honest. I might add another element on hover.

This example shows that the conent gradient ends up being underneath the button um, and not underneath this uh,

glass part. But in this, it it firmly looks like the gradient is underneath the glass. We will say for the glass,

the glass is going to be what color? It's going to be transparent obviously. We're going to say it's an opacity of

0.3 for now or 0.54 for now. Padding of like 10 pixels. It's going to be position

absolute. Let's do this. Instead of height 100%, let's do inset zero for now. Let's get rid of that padding

entirely. And let's do something like an inset of -10 pixels. Perfect. This is always something I don't know. Pseudo

elements and their stacking order. I feel like I'm always fighting with. Let's work on this glass here.

Background white border radius. Um, let's make a brad variable. And then this after is going to be slightly

larger. Needs to scale up. Now, could I do that with a transform scale or should I literally just make it bigger? Let's

try a transform 1.1. Yeah, that's better. I want to get this centered. Why did this not go

centered? Oh. Um, because I display grid on the button, it should be inline grid so it stays centered. Okay. Font size.

Let's just bump it up just to match. Boom. Okay, man. We're doing great. What are we eight? We're 8 minutes in and I'm

like almost done. Almost done. When you're dealing with padding and border radiuses, you'll want these things to be

linked. If I want this border radius to be 15 pixels, which I might not, I want to change it. I'll also want this

padding in this negative inset to be this variable here. So, I think you need to calc

rad. Does that do it for me? Okay, that does it for me. Cool. I want this border

radius to be calc. The var rad inset is going to be -15 pix. And then the inset is going to be vary

inset. And then I want this to be the rad plus the var of the inset to make sure

um that the border radius is what I need it to be. Um so why didn't that work? So we have an inset of

negative. Oh, because a negative 15 pixels needs to be positive times one to make this a positive. There we go. So

you can see here that the border radius is now even to this. And I think that's how this demo button works. Why is my

rainbow in front of the glass? Let's do this. Let's make our glass actually look like glass. And now I need the gradient.

I need the gradient to go behind everything and I need it to also be bigger. My button is that wide. Oh, it's

the padding on this button. You got to add the padding onto it. Man, what am I doing with my life? The

translate needs to be the offset plus the padding times one. There we go. There we go. Uh, the background is going

to be a conic conic. Man, I can tell you that this is probably the first time I've ever used a a conic gradient. So, I

think you can do from Yeah, you can. Okay, I'm looking at MDN 45 deG, but let's just say from zero de and we can

have that start off and we'll have the colors do blue, green, yellow, orange, red, etc. I'll

fix the colors in a bit. And with this cone of gradient, how the hell do you get it to this this thing to be like a

smooth transition? I think you have to do a filter blur, guys. I have no clip. Okay. Hey, just did I just did it. I get

rid of that transform, it goes away. Oh, the transform changes the stacking context. Interesting. Let's just make

this something silly like 150% just so we can see it. And then we'll do a Zindex. There we go.

Okay. Okay. Now, now we're in good shape. But we want the width to be 100% plus the padding times two. Good. And

same with the height. And we want the border radius also be the same. And then we want to put a filter of a blur on it.

There we go. Oh man. Um, it doesn't look exactly it. And I wonder if it's just I just need to bring the opacity down.

That looks pretty good. Okay. The border here still really bugs me. We would have to add another span to the works, which

sucks. It sucks to do that just for a gradient, but I think that's going to be what we have to do. That sucks.

This black thing here needs a little bit of box shadow. It is not that much, but it is not going left or right. It's

going down there. Let's just make this one so we can see exactly where it is. So,

10 pixels down. Maybe about five pixels of blur. No, 10 pixels of blur. No walk as as far as I can see. And then we're

just going to make it pretty transparent. Yeah, a little bit too much of an X or Y value. Let's try that apex.

Beautiful. Oh, it does look like there is a bit of a subtle shadow around the whole thing as well. So, let's add a

second box shadow, but that will be no walk on it. So, yes. Yes. This is going to require a little bit of surgery cuz

the whole thing is a button. So, even the glass is part of the button. We're going to have the cap. This is such a

bad choice to make at this point in time. The button is now going to be the glass. That is That feels like such a

difficult decision to make right now. Let's start with the We need two two or four box shadows. We need a white one at

the top. Let's start. Let's go top, bottom, right, left. Negative 1 px zero 10px blur. Maybe 2px blur zero walk. And

then we'll do like white. Oh, that did it on the left. So I actually want it the first value to

be that. All right, that's looking good. So that's the top one. What an amount of major amount of surgery I'm doing here.

So the Zindex now should for this should not be negative one. That is part of what's causing the problem. There we go.

Things are looking just a little bit better. Inset should be calc. I don't even know if this this should have an

inset of like zero or something. It doesn't even need something fancy there. That looks a little bit better. The blur

looks a little a little intense right now. The blur looks better now. I'm sorry, Scott. I just need to pat myself

on the back here for making this complete and total makeover transition in the last waning minutes of this

thing. Oh, I'm an idiot. I'm overwriting my black variable and that's why it's looking

funny. So, let's not use the variable black because I'm using that in the gradient. Uh, let's change that to black

border. That's looking a bit better. Um, let me move that back to the end. Ah, so this looks a massive amount better.

For some reason, it does look like it's going to like a really dark color. Let's do CCC. I mean, that that was so close.

That is a good guess. Watch as I change the gradient. It just spins around like that. Woo. Woo! Woo! Um, in order to do

that, we need a key frame. And I think we need a custom property. So, let's put that uh key frames

rainbow. No, uh, angle, we'll call it rainbow from 0 to 360. Then we need an at property

with an angle syntax, and that will allow us to animate it. Watch. I'll show you how it doesn't work. We were to add

an animation. It doesn't work. Um, might have to go to Google for this one.

I got 2 minutes. Oh, key fames. Yes. Hell yeah. Got it. Uh, a little bit fast. Like 3 seconds.

Yes. Uh, 1 minute. There was also a like a interaction on it if I look at the original dribble. Oh, it's 12:30. I'm

gonna check in with Scott. >> Yo, >> five more minutes or what do you what do

you think? How you doing? >> Did you do did you do any of the interaction?

>> No interaction yet. I was just thinking I was just about to start the interaction. So, take 10

>> to to finish it up and then do interaction. >> Oh, I was thinking 10 to finish it up

with interaction cuz I'm really >> interaction. Let's do that. Okay, let's do that. All right. Scott gave me 10

more minutes because he he's not doing very well. So, when the button is active, can we just scale the whole

thing down? Let's start with that. And when you it is active, we are just going to scale it down. I know you're not

supposed to do this, but I can't stand that this button doesn't have a little hand on it. There we go. Oh,

the glass is the button, not the black. Oh, good. Okay. Okay. Okay. Yeah. Let's let's take that off the actual button

and let's go to the black button which is the before. So what we want to do is say colonactive

and watch this scale 0.9. Oh no. Including the text. That looks pretty good. You know it's still I'm going to

have this impossible problem of stacking. You have the glass and you have this thing on top of it and you

have a linear gradient here. So, you're still going to have this kind of impossible task of how do you get this

white uh shine on it. Oh, I am so dumb. You could do it this way. You could do it like 2% and this initial one could be

like very white like that and then it could transition like to 2% very quickly. Man, I'm spending way too much

time on this part in particular. Oh my gosh, I'm so confused. What have I built? This was not a good idea of my

approach. The glass needs to stay the same size. Everything else needs to get smaller. Can I Can I do that? So, when

it is active, take the before, after, and the text and scale it to 0.9. Oh,

we didn't make any mistakes. I need to get the interaction done. Now, the first thing I want to do before making this

opacity much less or after making this opacity much less, this is me like waffling here. Not not like having a

hard time, but like ch going back and forth. And this one is much less. The interior one, I think it's much less to

the point where many people probably aren't even going to uh notice it. The gradient just gets a little bit more

tight when it's in active state. So, can we just change that? Is there a better way to do this? Maybe I should have used

absolute positioning. Um, you know what? Let's just We don't have much time, but should we change the

values? So, let's do blur 0 pixels. And then we'll go here and we'll make a blur value. Can we just change the padding

value here? Yes. I'm freaking genius. This is why you do everything with variables is now all I have to do is

just change the variable. Yes, maybe even a little less. Let's try 6.9. That's it. That's it, my friends. I need

an animation. It's just going to be we're going to rotate. Sorry, this is just copied and pasted. This is going to

be just rotate. And you might not know this, but you can just do two. You can do rotate and then say 360 deck. Is it

animate? animation animate like what this oh brother I have dev tools it's obviously animation and now it's

rotating the conic oh and I even said that very early on you're going to need the gradient itself to rotate and not

the shape that the gradient is in why is my scale value not transitioning oh it's because they don't have a scale value to

start with duh Uh, no. That didn't work. This is so funny

because how easy I thought this was going to be. The animation should exist on the before of the button. Oh, it's

it's animate. It's working. Okay. So, this is my result. Um, wow. So, what I have here is the key cap

button. the key cap button. You uh you can't see it has a slight rotation onto it. Overall, it's looking pretty dang

close in terms of, you know, not being able to overlay and stuff. It's glassy. It feels nice. And when you click it, um

that is a Z-index issue I have been unable to account for. And really what's happening is the gradient pauses. It

zooms in and it becomes a little bit less blurry. It becomes tighter around the whole thing. I think I nailed this

honestly. There's some Yeah. So, I made a custom app property to get the rotation going because that's how you

animate. In fact, I even tried it first without I did have to add another div here. So, I did have to add or another

span. So, I had to have the glass as the button, then the interior is the key cap, and then the span for the text. So,

I had to go another layer deep. The button itself, again, nothing too crazy here. I used just a background with a

transparency. The gradient is a conic gradient uses an animation. The border radius is always going to be kept in by

the padding and stuff to make it nice and uh correct border radius for everything. I did put a a blur on the

conic gradient which was a little bit of work to get it looking nice. >> 20 px was the right amount too. That's

exactly what I did. >> Nice. And then the glass part I found to be really hard because there's this

border on the glass that goes from white to gray to white in a gradient. And I did that with a a background of a linear

gradient. But like dealing with those transparency values to still have this show up while not uh removing the

glassiness of this was a major source of frustration for me and the thing I spent the most amount of time on for some

reason. Uh there's a subtle box shadow on everything. So there's a box shadow on both sides.

>> So many box shadows, >> the button and a box shadow on the glass. And then again, I duplicated the

Koig gradient, but ultimately I think this one needs to be gone. And that is that. The interior was super easy. Just

a text with some padding and that's it. >> My code is almost exactly the same. >> Yes. You know what I I was wondering

about that. Sometimes we approach these things very differently. >> Yeah. Here we go. It's It's exactly the

same. >> Yeah. We've I did not do the double gradient because when you click it, even

though it is behind the glass, I did not find that it >> I think you're right. That's the right

call. >> I don't I did not find that it I think that looks exactly like the video. So, I

was pretty happy with that. >> You're the That's the right call. >> The glass was was probably the trickiest

for me as well to get these these subtle little borders. What the the move for that is to actually put an entire

gradient and then mask off the entire button except for one pixel. That's how they do those those borders that sort of

wrap around as an animation. You have that >> an interior mask for it. Is that what

it's doing? >> Yeah. >> Yeah. I didn't

>> I didn't end up doing that. I ended up just using box shadow and I think I pretty much got it. It's not exactly

>> Oh, box shadow. Yeah. Yeah, >> that's a way smarter idea. Yeah, I don't know why I didn't think about that.

>> You do box shadow for everything. I was pretty happy with that. >> Yeah, honestly, ours were so stinking

close. And the major difference was position absolute versus position grid. And

>> display grid. >> Display grid, right? Yeah. I don't know if you can declare a winner or a loser

here. Uh >> comments are going to have to to tell us. Yeah, I think it's going to come up

to who was the most entertaining to watch because I think we've both nailed the the implementation.

>> Let us know what you thought about this. If you had a novel solution to this, let us know. I might even keep tweaking mine

before I publish the final one here where I'm just Yeah, tweaking. Let us know what you think about this. If you

want to see more of these types of UI competitions, I think these are great because this is realworld stuff that

people are building and now you know how to build it. Thank you so much for watching. We'll see you in the next one.

Hit subscribe, all that good stuff. Leave a comment below. Give us your solutions. Peace.