 After a recent video where I looked at creating blobby shapes using border radius, I got a tweet that was asking me about how we can create this type of effect with like these edged corners with a border because it's not so hard if there's no border involved. It seemed like an interesting challenge so I dove in to see what I could do with it and I'm pretty happy with the end result which you can see on the screen right now and if you think this looks cool and you want to see how I did it well stick around you're in the right place. Hello my front-end friends thank you so much for coming to join me for yet another video and if you're new here here at my channel I help you learn how you can fall in love with CSS and today we're going to be doing that by creating that button effect and we're going to be starting with not very much. We have a nice blank screen or blank button to be dealing with with no styling on it whatsoever. Just have a button centered on the screen and we're going to build the whole thing out from here. Now one thing I have done is just throwing a really big font size on here but we've also made this responsive so it will adapt to the screen less so for like realistic situation but more to make sure that all of this can scale and can work as well and it's not just this one thing that can work in this one situation I'm giving we want it to be adaptable and everything along the way. So the first thing we're going to do is let's go into here and select our button which is where all the work is going to happen or all the magic is going to happen and there's a few things we're going to set off the start with some custom properties and these are going to be locally scoped properties not in the route if you'd prefer to have them there it wouldn't make a huge difference. Let's start by choosing a background color and for this one I'm just going to use white because it works well but you could set any background color for your button you want and it makes it easy to change because it's going to be a custom property here and you'll see why this is important as we go through. I'm also going to choose a border color and yeah I'm going to use a linear gradient gradient and I usually go with this so to bottom right and we're going to do a red to blue so that's nothing too complicated right there and you know what while we're doing this we can we can shrink that down so you can see all the code and so we don't have to side scroll it all another one we're going to throw on here is going to be my border width and for now I'm going to start with a 0.5 m we could even like change this m away to something else but technically you could go away from m and use pixels or use other things but as I said you know my font size because it can adjust and scale and everything and so using m here is pretty important to making sure all of this is adaptable and can scale and the last thing we have our border width we're going to have our edge size I don't know a better term to give that if you can think of a better name let me know or you know you could always switch this out in your own code but this is like how cut the corner is going to be basically once we're done doing that and with those custom properties set we can come in and start actually styling up our button so the first thing I'm going to do is a display often on buttons I use inline flex but in this case I'm going to use inline grid just because it's going to let us save a couple of lines of code in a little bit and basically it just means it's a grid item but it's inline so if you had multiple buttons they won't stack on top of each other they'll go next to one another let's come in here with some padding and once again I'm going to use m for my padding here and we'll do 1.5 m these numbers could change maybe these could even be custom properties you could play around with but by using m here it just means that everything is scaling around with my button which is what I want just like my border width and just like this edge size are going to do I often get questions about when I'm using rems or when I'm using ems rems are what I use most of the time especially for font sizes and for set values that I need but if I need something to be able to scale with a font size so my padding is going to scale with the font size of my button for example here that's when I'm going to use m instead if you're on clear width units in which unit to pick in what situation I have a video that is dedicated just to that so there should be a card popping up and I'll link it down in the description as well let's put a border of zero on here we're going to need a border but we're not going to use an actual border so we'll do a border there we need a background color so we can come in with our background color and actually what I would suggest I was going to do I usually say don't use the shorthand and actually use the long hand for things like background in this case though I'd actually say to use the shorthand because then let's just come in and do our background color and it comes in but it's white so we can't see it but say I came in here and I did red a single value would still work but if you did come in here with a linear gradient gradient black white whatever it's it's also going to work so it just makes this background color here a little bit more versatile maybe even here we just say background then we'll switch that out on the fly and then let's do here and we can put this back to white and that was where some of the fun stuff starts um you know what actually for now let's start with this being a different color I'm going to just do a number we'll just do a three three three we won't really be able to see the text but that's okay because I do want to come in with a clip path on here and we won't be able to see the clip path until we have it now clip paths are a little bit funky and they can be really hard to create on your own so for that reason I really recommend using this clippy cliff path generator uh and in this case we can go over to the bevel one here and it gives us the bevel now if you wanted to actually do four corners like this you can take exactly what we're doing here and level it up a little bit um but what I'm going to do is actually going to delete a point there I can click on this one delete that point there and sort of get this shape going on and I'm just going to come down here and copy that I think when we click here it copies it anyway but we'll copy that and we're going to bring that down here for our clip path and what we're going to do is you can see it's sort of giving us the right shape that we want the issue with it right now is that it's all based on percentages which it then it like the shape of the corner really depends so if I do click me right now you're going to see that it's going to stretch that top part out and it gets even longer or if we just have the word click it swishes it a little bit more because it's percentage based usually a big fan of percentages for these things but in this case uh instead of using this I would do a 0.5 m and over here where my 80 percent is we would have another 0.5 m um and you can sort of see things are coming together a little bit uh actually I think I broke that one but we'll fix that in a second but that's why here is this edge size variable so on this polygon that we have right here we can make this a little bit more readable and I'm going to explain a little bit of how this actually works but one way you can do it and code pen I'm a little worried that prettier might kick in here uh when we save at one point but we can go a while without saving so but basically what we have here is a whole bunch of values this first value is the first point that's going to be on our corner right here so we're taking the first first corner we're going to this point that's right here I'm actually saying go over by 0.5 so it's taken here and it's moved it over to 0.5 and then we have the zero percent here is how far away from the top it is so if I did put like 1 m here it's actually going to move that point down and then we want that to actually be at zero so it stays stuck to the top this next point is at 100 so go all the way to the left side 100 of the way over and then go zero down so it's going to be stuck right there and then here this is actually where I made a mistake because we're 0.5 down I actually want to be all the way down and just moved up a little bit and I think that's where the original was at 80 percent but we can overcome that problem um and we can tell it to be that far so to be able to to do this and to make it work where we can just modify that one custom property for our edge size we can come in and for this one it's nice and easy I can do my var and I can just write edge size and anywhere that had 20 percent we can use that same value so I can take that and also plug it in right here now the interesting ones are these ones that were at 80 percent because what for these 80 percent ones what we're going to do is we're actually going to have to wrap them inside a calc we can say 100 percent minus edge size and so it means it's going 100 percent of the way down and then we're moving back up that edge size variable that we created right here and so now I can actually just take this whole calc and I can copy and paste it right here and now look at that it looks pretty good and it has the shape that we want one thing that's a little bit weird is this point here is actually this one right here and then the last point over here is the one that's over here because we're you know we're going this way around but because we start in the top right I actually think it's a little bit easier this one here is the first point and luckily we can just do that and switch them around and just make sure there's a comma there and so now what it's doing is it's taking the first point and it's moving it down and then it's taking the second point and this is now the second point three four five six and if you want you know you can come in here and add comments and say like left one for this one and you might be a little bit strange to put in comments for these but I'm telling you now it can actually be really useful because this is going to get more complex soon so I'm just going to do this really fast so I'm just going to go through and add comments to this really fast and I'll see you in just one second all right so there we go we can see that that's there my comments are here that just make it a little easier if I do need to make adjustments now where things get more interesting is this next step where we're going to come and create a new selector and this is where sort of the magic happens I guess we're going to say button we're going to do our before and after we're going to be using these for different things but let's come in and do both because both are going to need to be a content both of them are also going to position of absolute absolute and both of them are going to need an inset of zero if you haven't seen inset of zero before it's the same as saying top bottom left and right all of zero you can use it like a shorthand like margins as well where you can put out multiple values all at the same time now what we'll do is let's come on my button for only and we're going to give this a background and just like before I would suggest doing this as the shorthand background and not the longhand so you can do this as a gradient or you can just do it as a solid color if you prefer and this is where we're going to use our border color and you can see there it is my gradient is coming in right there awesome you know kind of cool right and it's covering my text so covering my text obviously presents us with a problem and I'm going to do a z index of negative two for a very specific reason and there's one more thing with this negative two and because we're throwing a z index on here whenever I use that indexes with pseudo elements I always like coming and doing an isolation uh on the the parent here um and actually we probably hmm maybe because of this is grid it's working I could be wrong on that because one thing I never did on here which I thought I would have had to have done is a position of relative we're going to throw it on here just to be safe anyway um oh there actually okay so see how the colors changed before I did my position relative that pseudo element was actually filling up the entire viewport but because we have a clip path on there we don't see the entire thing the position relative now means that inset zero is actually for the button itself so we're pulled in a little bit that makes a bit more sense now and at the same time you could do a z index on here which will create a new stacking context I'm actually just going to do an isolation of isolate if you've never seen this before all it's doing is creating a new stacking context with no other side effects and the nice thing with that is the stacking context means this negative two is relative or it's encapsulated within this button rather than being a z index on the entire page like you would normally expect um so yeah we're creating a stacking context we're limiting the negative numbers or positive numbers whatever to what's inside that button so in a way things are scoped to my button now rather than being z indexed anywhere on the page that we want which is a good thing um so there that that's what will eventually be our border and you're going well Kevin how do we turn that into a border good question this is where the fun comes in where we use a the after that we have right here and this after is going to have a background and what this one is going to be is my var background and you can see it's taken that background color that we'd originally set once again it's covering the text so let's throw a z index on here of negative one and that's why this i put it negative two because i wanted to make sure this one could go on top of the other one um and actually with all of this the background being set here is a little bit less important and what i'm going to do though is set this back maybe we'll do a light gray just so we can see that it's different from this background color over here uh and eventually we can put that to whatever we want and where this is where the magic happens but also where things can get a little bit complex but we're going to keep it really simple at the start and then i'll build on top of it that makes it a little bit better more usable i guess is the best way to explain so what we're going to do is i'm actually going to take this entire clip path right here copy it all we're going to bring that clip path onto the after here we're going to make a small change a few small changes to it um right now it's lining up exactly so we can see it's hiding it's it's the shape of my button because it's using the same clip path but say i came on this uh one percent zero percent i should say and i made this one m and just for fun let's make this i can see a change already uh and i make this a one m you can see you know we've moved a point down and it sort of changed how things are happening so the idea is what i want to do is we're creating like a fake border by using these two layered pseudo elements one on top of the other so we're actually going to come in and do a lot of this with a custom property but just to make it a little bit more readable to start with i'm going to come in and put in a few set values here uh so here if i do the point two five you can see it's moved that point over a little bit and then we can do my remember that was this one here so we've just moved it that way then i'm going to come to the second side here so we've moved it over uh let's just do the zero yeah so we'll come to this top one and we want to move it down so i can you move that down by point two five look we're getting that like edge right here then we want to come over to this corner so my top right corner this zero can get moved down a little bit better right now the problem with a hundred percent is that means it's all the way at the end so we're going to come in here with another calc and this will be that minus my point two five m so there we go then here so anywhere we had a hundred percent now i can come in and switch that over for um this and when i say anywhere i include these 100 that are already within calcs now because this is already in a calc you can you don't have to do another calc we can just do a minus point two five m and it's going to work then over here we can do the same thing minus point two five m then over here we can throw in our other calc and over here we can throw in our other calc and i forgot this last one right there and that should give us a border that goes all the way around except i obviously messed something up we forgot a closing no where did i make a mistake ah here we don't want that oh we did want that it was a hundred minus point one two five there we go and now you'll notice it's not perfect but it gives us that idea of having this border that's sort of cut out of everything the issue that sort of comes up is the thickness of this like this one's actually too thick this one's too thin and it took me a while to figure this next part out and you might be going Kevin this is a lot of setup and it is it is quite a bit of setup and you can see at least it's responsive but the nice thing is because we are going to be setting this and switching a lot of this out for custom properties it means that we don't ever have to come and look at this again we can we're going to be able to control absolutely everything just with these four values right here so don't worry too much if it looks really complex at this point and it's going to get more complex but the use of it is very simple and what i'm going to do in a one way to simplify it is and this is where these comments are going to help because these are going to be long with the custom properties we're going to take this guy off of here and this is where we're going to use my var border width instead now as i said before i think my border width was a bit too big so these numbers are going to be kind of big so let's come up and actually change this border width will be a we'll try 0.25 and we can play with it from there there we're going to have my border width and then we're going to have my edge size here and the reason this is an issue is because we don't want these to actually line up the inner edge needs to be different from the outer edge this part took me some playing around with but what ended up working well for me i'm going to do a calc around this i'm going to say edge size plus var border and you can see that's actually like moved it down a little bit like that and then i'm going to do a x 0.25 and it sort of just brings it back it's making like this border width like you could even wrap all of this like that because we're doing order of operations so basically i just need my border width to be a smaller number to make this actually work i had to play around with this number and then i found something that seemed to work really well at a lot of different sizes i wish i had a better answer for you but it's basically let's go to our edge size but then suck it back a little bit and here let's just we'll switch out a few more of these so anywhere i had my edge size i'm going to put this and then anywhere i had my 0.25 we can say it's my border width and again this starts getting to look really messy but see how this corner now we've done these first two and see how like the lining up of them is a little bit different and just to show you actually like if i bring these down to a 0.125 it see how it adjusts the thickness there a little bit and if i bring them up to like a 0.5 the the thickness here is going to adapt and actually the 0.5 looks pretty nice we'll stick with 0.5 maybe um so it's all about just like trying to match the width all the way around and i found this happened to work well because again if i didn't include this it just it led to these parts being thicker than the up and down parts um and which is normal so anyway at times 0.5 seemed to get me to where i wanted to so we'll stick with that um all right so as i said things get a little bit complicated so that's again why i'm putting one value per line rather than stringing everything together so here so let's caught me my var border width and that was anywhere i had the 0.25 so now on our top right we don't really have much to change except we just wanted to bring in the this value and this one to be our border width so that stays consistent then we get down to here where things get a little bit more complicated again cal that should be okay and again we'll leave this on two lines just to be more consistent so here we have the first corner which is here and then that other one which is down below and this is where we need to get in with this funky guy here in a few spots uh and even though i've played with this you can see i'm i'm still trying to wrap my head around exactly where to place these things um but it's anywhere i have this edge size i'm going to replace it with what we have there because that's what got that to be closer to what we wanted and then here i think all we have to do is bring in my border width there this part we want it to move so it's in the right spot like left to right but it needs to go down more which means um so that should be oh i have the minus 2 5 here which i think is mucking it up so that should pull it down there we go um you'll notice i do have nested calyx here it shouldn't cause any problems and i find it just easier to copy and paste um okay so that this one's in the right spot so this one needs to go over a little bit so let's a look at these two what i should have done is maybe copy and paste the things a little faster but here we have this one which probably is the same thing let's try huh it was okay good so that one's in the right spot now uh again here we have a 0.25 so the 0.25 we always want to switch that out for our border width um and then here we probably can't just do that can we maybe we can i think maybe we can get away with that on that corner it worked okay so again a lot of work a little bit complicated you can check out the code that's linked in this video if you just want to copy and paste it but what's nice about that now is here if i change this all of them are going to update if i make it a 0.125 everything updates and that weird calculation with the 0.5 is what's enabling it to actually just be something that you know it seems to work at like well 15 is going to be too big but even if we make it like even as it's getting thicker things line up pretty nicely uh or as things get really small things still line up really nicely so it happened to just be the right calculation on there um and then the edge size of course we can also change this so i can make this a really small uh edge if we wanted to or we can come in and make that a a whoa is one going to be too big one even works on that and they're both m's so everything can scale nicely as well which is perfect now one thing that i do want to change still and we're not done yet is to have some sort of hover effect on here so actually i think we can change this back to a white um and then what we're going to do is let's come down that's my after so my this is where the fun continues button hover and we could do a button focus um and on both of these actually we can do a or you know what let's do this the more fun way button where hover focus after uh so the where is the same as what i had before basically but we can do it like this modern css is fun um and we want to change the clip path and this is where we get to play with the clip path more so let's come here and just do transition of clip path and we'll do 500 milliseconds for now so what do we want to do so this is where these comments are really going to help us out because we don't want to touch the right side we only want to change the left side so the left side remember the first value is i don't remember the first but let's just put a number here and see where it moves to it was already one what's two oh we need we need to hover kevin so we're moving that way which is exactly what we want to do so here we actually want to go all the way over right or almost we'll have to change this in a second but we want to shoot all the way over to that side so let's say i do that there and i do that i think it'd be this one then 100 when i hover now those will both shoot all the way over to the other side so we get like that swiping animation that comes in the only thing is we can't do 100 percent we're going to do a calc of minus our edge size 100 minus our edge sides we don't get that weird overlap that's going on you can see like when we have an overlap it's kind of awkward so we should be able to use that here and here oh no not edge size border width sorry border width and border width that would make more sense so now when it moves it moves all the way over and now we can just do that again for my bottom left value that's over here where this one become the exact same thing let's copy take that first value put it over and so now all of them should slide on over uh we do get one issue you can see it's actually going to the wrong spot i want bottom right two this i'm just going to copy this i want these two the bottom right two and the bottom left should be in the exact same place so that makes that a little easier and then we just need to take that top the top right actually now the problem is the top right we need it to actually line up down here it's not it's stopping here because we're just we moved it all the way over but we also need to move it down oh i think actually we want it to be the same as this point right here bottom right one we want it to line up with bottom right one so top left one can be the same that should there we go it's scoots on across right into there uh and since we're already here we can say that my button wear hover focus um has a color of white and again that that could be a custom property just so we can actually read our text you can come all the way up to here on the original button do a transition of color over maybe a little bit faster of a time and there we go and if you enjoyed this video and you'd like to see more where i go into tips and tricks and fun things you can do with css i put a little custom playlist together here that i think you'd really enjoy and with that i'd like to say a very big thank you to my supporters of awesome over on patreon dan johnny patrick simon and tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome