 I recently came across this dribble shop by Aaron Icker and I wanted to see if I could recreate it and it turns out it wasn't as hard as I thought it would be. So in this video we're going to look at how we can recreate this effect and as a bonus we're going to see how we can make it really easy to customize. So we can not only make it look like we saw there but we can also do something like this with it as well as something like this. And I'm going to try and give you as many levers as you can pull on this to customize it to your heart's content. And we're going to be doing that by taking a look at what we have on the screen right now and we're starting with a button with a class of button on there nothing too fancy and as you can see it is styled up a little bit but this has nothing to do with the glow itself so you don't have to match what I have here as a starting I just have my box sizing border box as a standard. I have done a bit of styling on my body here just to get my button in the middle and add this gradient on the background and the gradient here that I did get I'll put a link down below to conic.style by Adam Argyle which has a whole bunch of conic gradients you can use to make nice looking gradients like that one and then I have these button styles that are right here and if you want to reference back to any of these I have linked to the finish code in the description these are just to give us a base to start with you do not need any of them for what we're going to be doing here I just wanted to make sure we had a button with some substance and everything that we could work with so some padding a larger font size for the demo stuff like that but this should work with anything you throw at it basically and let's come back over to here and where we have my div class of button now for this I'm I'm going to separate the styles from like my typical button here and I'm just going to write glow effect here which is going to be sort of what controls the effect itself this is going to be the parent where all the levers are attached to so that's going to go on here but then we do need extra stuff in this button and this is one of the limitations of this type of effect especially getting it with those round corners that we saw where we do have to use svgs for this so what I'm going to do is I'm going to come down here we're going to add an svg and inside that svg we're going to add two more things which are we're going to do a rect and another rect so an svg with two rectangles inside of it if I hit save right now you'll notice everything sort of gets a little bit crazy and that's just because we have an svg in here that's taking up space and the browser has a default size that they actually give svgs and we're going to fix that in a minute and what we're going to do on this svg itself we're going to first give this the svg itself a class of glow container because it's actually what's going to hold the glow itself the glow effect is here on purpose on the outside as well this sort of all on its own wouldn't do the job we really need to have the button on the outside the svg inside of there with these rectangles in there we're going to be using all of those parts and this is where all the controls to finish customizing everything they're all going to live on that now the two rectangles that we have here if we look at the finished design of what this is doing you'll notice there's like a really bright line around the edge and then there's like a soft glow coming off of that so we need to be able to get both of those so one of these rectangles will act as the soft glow and the other one will act as that hard line so let's give this a class now I'm going to give it a bit of a weird name but I'm going to do glow blur for there and then this one's going to be a class is equal to glow line there may be not the best names but I just want to prefix everything with glow just because then you know everything's related to this glow effect that we're creating and I guess you know you could do just glow here I guess but I'm going to do glow effect but yeah if you want to do different naming on any of this by all means you can do that and now what we could do is actually come on these and start trying to get them to show up on the page a little bit with some extra attributes here for svgs but most of the styling we're going to do is all going to be through CSS though there are a few things and attributes we will come back to here for but a little bit later on once we actually need them so let's come back over to the styles here first and the very first thing is let's see my glow container just so we can see what's actually happening here I'm going to give it an outline of three pixels solid and black so we can see where that svg is and we can see that's what's causing the button to all of a sudden be this gigantic thing that does not look very nice and what I want to do on that is we want this svg to actually be over like on top of the button itself so I'm going to use a position absolute for that which pulls it out of the flow but I want to actually line it up exactly with the button itself so that is why we have the glow effect here and this is why it's really important that we have the glow container inside this parent of glow effect so in the css we can have my glow effect for now and this is really going to be as I said where all the levers are but we're also going to want a position of relative on there so then on this one we can come in with our top bottom left right all these other things like that but before we do that because the svg size is wrong let's start by giving it a width of 100 percent and a height of 100 percent and hit save and it's hard to see but the button is the svg is actually the same size as my button now I've said in the past that declaring width 100 percent is often useless and it is people declare this all the time on things where we don't need it but in this case the size was wrong so we're using this to fix the size and it is giving us the desired result so it's not that width 100 percent is always useless it's just when you're declaring it when it already has a certain size on there and it's not actually doing anything then it's kind of useless or it can actually cause problems but in this situation we need it and while we're here I'm also going to give this an inset of zero which is a top bottom left and right of zero it's a shorthand for that and you can see that it lines up you might be thinking that we don't need these because we have a top bottom left right of zero but the svg has a size to it already so if we don't have them it is too big so we do want the width and the height on there as well as this inset of zero both combined give us the result that we need now what we're going to do is come down I'm going to select my glow lure as well as the glow line and currently these rectangles don't actually have a size either so we can do the same thing with 100 percent and the height 100 percent and we would get a black box if everything works properly here covering everything so we want these to be there but we don't want a fill on them we need the fill to be transparent because we're going to be focused on their stroke which if you're not used to svg's is like a border so let's get rid of the fill by doing fill transparent and because these are svg's transparent we're not using background color or stroke or border we're going to be using fill so if I save that now you can see they disappear and now we do want that stroke to come in so we can come in with we'll start with the stroke width just so we actually have a stroke that can show up and then we're also just going to write stroke and for now I'm going to write black and you can see they've come in so let's come back to my glow container we don't need this outline for now so we'll turn it off and now we're looking at these two rectangles that are actually overlapping each other right now which is perfect exactly what we want so they're both there they're both overlapping each other and they both have this stroke which is just like a border and this stroke width on them of five pixels so we can see them there and with a transparent fill so they don't block everything that's in there and now what we need is we need it to be broken up a little bit into multiple pieces which is where the fun part and where svg's the power of svg's can really come in because we have another property here related to the stroke which is the dash array and the dash array is kind of interesting so I'm just going to write 20 pixels 20 pixels I'm going to hit save so as you can see there now we have these 20 pixel black lines and then a 20 pixel empty space we could actually take this one off and you'd get the same effect because if you only have one number it just assumes the same for both but you could actually put two different numbers in here and then you get two different things going on you can also put these in as percentages but it doesn't really work as you'd expect so if I did 50 50 percent it's probably not what you were expecting to get so it can be a little bit weird and actually before we get to how to fix this and make it easier to work with you can also put these in as unit list numbers so I could say 50 50 and it's assuming 50 pixels just because of how svg's work I just feel weird having these unit list numbers in css so I'm going to be using pixels for everything but if you prefer to use them leave them unit list you could also do that but the fix here is to come back to here and on both of these rectangles what we're going to do so let's get on both of them and we're going to say that we have a half length like that is equal to 100 and this is basically going to give us a scale of 100 to work on so you see I've saved that and now this is doing about halfway so if I come back and just to show that they are overlapping if I delete this rectangle it doesn't change anything it looks exactly the same these are overlapping they're working together just the joy of how svg works where we're painting sort of on a canvas so these two items are on top of each other and we have the 50 50 here and again this is pixels and it's going to look like that if I switch this over to 50 50 percent it will look very different so percentages get kind of funky with these so either unit list or just go with your pixels now you can see 50 pixels is going halfway and then we have half of it empty and that's because we're the path length we're telling it is a total of 100 so we've now made this a scale of we were working basically in percentages but using pixel values so a little bit different than what you might be used to with regular things in css and html but by doing that it makes life very easy now let's go back to the design itself and take a look and you can see like if I rewind this a little bit we can see sort of the total size that we have to work with or if we go to the starting animation maybe it's like it's starting right around here so we can see it's going up to about almost halfway ish along the top here so what I found has worked well is doing a 20 pixel line followed by a 30 pixel space and again it's more like 20 30 percent so the reason that's working is because then we get 20 percent here and remember 50 did like the whole thing here and down so we're getting 20 percent then we're getting the rest the last 30 percent is the remaining bit and just like when we did it with a small number let's do like five we get like one five is five on five off five on five off so by doing it this way we're getting 20 on 30 off 20 on 30 off so we can sort of you know we're already sort of lined up with how these are right here so it's a good start now where the real magic of this comes in is when we get these to move and I'm going to start with a very simple way of doing it and then we're going to sort of make it a bit more complicated so let's do our glow effect and then in the glow effect I want to choose these two so we could do glow effect so we can have our glow effect glow blur and where we can just duplicate that line and also do my glow line right there and so we're selecting both of them but I don't want it in regular circumstances I only want this on hover and we're eventually going to bring focus in we can clean this up a little bit but just we get it working for now what I'm going to do is a stroke dash offset and stroke dash offset is really fun where we can move the stroke around basically so if I come here and I say 100 pixels or actually for now let's do 25 pixels because it's going to be more obvious what's happening and you can see they've moved along and it's basically it's moving them 25 along or maybe 20 would be fine or whatever you can choose an amount that you want to move them by and this is something we can transition so let's throw a transition up here transition stroke dash offset and let's just say 500 milliseconds for now just so we can see it going and look at that we can see it moving and so here we could do like a negative 50 and negative just changes the direction that it's going in so if we pull this example back in and let's actually hit play on it so we can see it moving we can see this one starts here and then it's ending down there so if we come take a look we can see the top one is starting there and it's ending down here we want to move it a bit more so in this case a negative 65 actually ends up lining it up pretty well with where we saw it finishing off in the example we are looking at so we get them moving like that let's slow it down maybe just a little bit for now so it's not moving too fast and we can see how it circles around and that's pretty cool now you might be saying Kevin what about the border radius we have the blurs we have these other things to do the border radius is actually the trickiest part and there's a problem with browser compatibility that we will fix by the end of this but uh yeah already you can probably get an idea of where this is going so pretty cool to start with we'll do the border radius now but at the very end we'll circle back around to actually make it work because the border radius i'm going to set now will not work in safari so that's ios and on max with safari which is kind of annoying but it will we'll get a fix anyway and that's because we're going to be using the rx attribute and the rx attribute is your radius on the corners of these rectangles and in this case for now let's just do 1.25 rem and the reason i'm putting that value here is because that's the same value i used as the border radius on my button so we'll make this work a little better but let's hit save on that for now and you can see it actually follows the border radius once we make a few little fixes and stuff it's not going to look so funky like it's looking right now but you'll also notice that vs code is highlighting this rx here and that's because rx traditionally wasn't a value we could actually control with css there's a name for it in svgs that's escaping me right now for things that you could style such as your fill and your stroke but they have added it with svg2 it's supported everywhere except for safari so this would be working from and in firefox no problem uh or of course it won't work on any ios device because they're all running webkit in the background so we will fix it but for now let's keep on going and then we'll just because it looks a little bit nicer when it's actually working that way we're going to run into an issue and actually let's start with our blur to show show what this issue is going to be so here we have all like the blur and line together i'm going to come down and do the blur by itself down here uh so it's not blur it's glow blur and i'm going to use a filter of blur and filter is actually an svg for svgs originally and let's just put in like five pixels and right away you're going to see an issue in that it's blurring inwards but it's not blurring outwards and it actually is blurring in all directions we just don't see that blur in all directions which is not ideal and that's because svgs are not like regular elements where if something is overflowing them that we see it svgs are like this infinite canvas and we're deciding on a small part of that canvas that we're actually looking at and we haven't declared an actual view box but we have the view box is sort of the area you're looking at within an svg and anything that you know the world is infinite outside of there but we're only peeking into this little window and so the blur is part of that thing that we're not seeing right now because it's it's not within our view box so this solution is maybe a little bit hacky but it works really well and it shouldn't cause any issues whatsoever and what it is i want to make my glow container much bigger but keep these lines lined up with my button like this and by doing that it means our view box is going to be a lot bigger and that way we can see the blur that's spilling off of our lines in all directions so to do this i'm going to come back and come all the way back up and we will turn the glow container outlined back on but i'm going to change the color here from black and i'm just going to make it a blue for now so it's a different color just so we can actually see it you can you know it's not the same color as the lines that are moving and what i want to do now is actually increase its total size so here where we have the width and the height i'm actually going to use a calc on these so we'll do both of these at once we'll select both of those so let's go before both of these ones here and do a calc and then wrap it in the calc like that and then what we can say is plus 100 pixels and hit save and it gives us a much bigger box to work with and now you can actually see the line on the bottom and it's broken our lines a little bit don't worry we're going to fix that very easily but you'll notice the line on the top is actually kind of cut off a little bit and we only have the blur going down but the line on the bottom you can actually see the whole thing and even on the side there we can see the blur coming off the side now and you'll also see that the line is much thicker than what we had before because svg is actually splitting that stroke half on the inside and half on the outside so we're actually getting the full five pixels now as well now what we want to do is actually center the whole thing and this admittedly is a little bit it's just a random number i'm putting here that i found it's way bigger than we'll ever need hopefully and that's sort of the point of it is to make it bigger than what we actually need but we need to move the box back over to be you know centered on this entire space instead of how it is now and just so you know i just did a hard refresh here by refreshing this instead of using like the live server i have running and it actually fixed those those lines here so they're running around the outside of the entire svg now so it was just a little glitch i was wondering why they were weird because they shouldn't have been so they're just doing a hard refresh did fix those so now yeah let's move this entire box back over sort of where we need it to be but because we do have this hundred pixels here we can actually use that on our inset where we could do a negative 50 pixels and it's going to center it perfectly because our box is offset by 100 pixels we then go half that way and then half back up and we're back where we started so you know we don't need to add another property in there that works really well this could also be improved though by using a custom property instead of having to write this and just you know if you were to come across this code it would seem very random so what i'm going to do is come up onto the glow effect parent here and we're going to create our first custom property that's going to be a lever that we're never going to touch which i'm just going to put um container offset and put the 100 pixels here and then everywhere that we had the 100 pixels so in these two spots we can do a var container offset now here we need this one to be negative 50 pixels and if i ever change this number i'd want that one to update too so here instead of the negative 50 we can make this one inside a calc so we can do calc and then var container offset and we need that half as much so a divide by two but we want a negative 50 and not positive so i can do divide by negative two and it looks exactly the same but now the advantage is if i do change this number it's going to fix everything do a hard refresh and it fixes that line or if i made it smaller and hit save you can see everything's you know moving all at once all together so the inset the width and the height are all being adjusted at the same time now i'm going to leave this at 100 and i'd suggest that you just always do it's never really going to get in the way of anything so because we're not really going to change this one i'm also going to add a comment here to saying do not change used for calculations it makes it a little bit easier and it controls everything if ever you do need to change but it also gives a little bit more substance to what's happening here with instead of just having random numbers so i like having that as a custom property and we'll save that like that and everything is good to go sort of but obviously now our border things need to be sucked back in so to be able to do that we can come down here and the big problem we've run into is the width and the height are actually wrong at this point we don't want it to match the blue box we want it to match the blue box minus that container offset that we just added so we can do that with a calc once again and actually let's select both of these and so we can say calc of 100 percent minus var container offset so now if we go take a look we can see that they're actually the exact same size as the button they're just in the wrong spot so this is where custom properties can be super useful because you know you don't have to worry about what this number is you just need to know that's the offset that you need to be working with so there we go we can see that that's working nicely and now we're going to come in with two more svg i was going to say css two more svg properties which are x property and our y property or i guess they're svg attributes that we can style with css and basically i was talking before about the canvas that we had and the x and the y are where within that canvas we are so i want to get this point moved over by the offset but i don't want to go the entire offset just like we didn't want to do the entire offset here we had to divide by two this was a negative we wanted to go positive so if i did 50 pixels this way and hit save and then i do a 50 pixels down now you can see it lines up exactly where we want it to be and we're right where we want but now we actually have the glow on the outside but we have this container offset set up everywhere so we might as well do the same thing so for both of these let's do both at the same time we can do a calc and in this case it would just be my var container offset divide by two because we saw that 50 was working and we can see that all of that has worked one last thing to do to make this a bit more functional is let's turn off that blue outline that i put on there and now if i go to hover on this and get the effect you'll notice it's coming all the way out here because putting that outline back in that's where this svg is living even though the hover effect right now isn't on the glow container it's actually on the glow effect right here so it's on the parent but if you have an effect that a hover effect on a parent and you go on top of one of the children the browser knows that that child is inside the parent so it's going to trigger that because you're effectively hovering on that element because you're hovering on one of the children now i don't want that to trigger here i only wanted to trigger when i'm on top of my button so a nice simple fix is on the glow container itself again we can turn off that outline and i can do a pointer events none and what that means is even though i'm inside that zone nothing's happening but if i get onto my button i still have that pointer event on the button itself or the the glow effect class i should say so when i go on here it's working but nothing is being triggered out here and it will never because it is position absolute it's outside of the flow of everything it's not going to get in the way of stuff and if ever you did need to make this smaller you could make it smaller but i'm going to stick with 100 for now but it's nice having this as a custom property because if ever you feel like i don't need it to be this giant thing i can reduce it but again we don't want it at zero because then we have no glow on the outside the glow is only on the inside so 100 pixels is definitely overkill but i'm going to leave it like that so we can play around and you can do lots of interesting things with it if you need offsets or bigger glows or whatever it is now let's work on the the glowy things now because these black lines definitely do not look how they should so if we come back to the original one it's going to be a little bit hard to see but if we pause it it doesn't look like these are so harsh the lines on there are really hard and here they're a little bit softer like around the corners hard to tell because they're so thin but one thing we can do and this is one of the ones i will do on the svg itself as another attribute is to come on both of these and i'm going to add in a stroke line cap is equal to round and in doing that it just rounds the edges at the at the at the ends of my strokes and it makes them look a little bit nicer now it does extend the size a little bit to do that but it's fine for what we're doing here so that's perfect now we want to be able to control the color and the thickness and all of that and so if we come down we've already set up our glow blur i'm also going to set up my glow line and for this glow line we can set change the stroke on there so let's say we want to make it fff so it's a nice bright white color that works well and then another thing we'd want to have is our stroke width and maybe like a two pixels or something like that would actually be ideal for something like this so this is two things that we would want to have here but we'd want to control have like control over these if ever we need to update them in different situations so instead of just having these as values down here to me it makes sense to do var glow line color and var glow line thickness as custom properties now we could set these as custom properties and not declare them but give them backups or something because you can see right now they've actually disappeared but i'm going to set all of my controls up here so we can say my glow line color was we wanted fff so that should make it white and then my glow line thickness and let's just do 10 pixels for now to see you can see it has shown up and then of course so we could do like a one pixel or a two pixel just to give us that really bright sort of center to our glow and then we might as well duplicate those and do my glow blur color and glow blur in this case glow blur thickness we don't really need to worry about too much we could just do a glow blur size so we're controlling how blurry it actually is so i'm going to make it maybe eight or 10 pixels here and then we can go and set those two up down here so let's just copy these paste that in and then so here is my glow line get changed over to blur and you can see it's already getting a little bit closer and the blur here i'm actually going to use the same variable so if i make the line thicker it's also going to increase the blur value of it and of course these aren't thickness both of these ones should be size instead and there we go look at that nice blur that's on there it's looking pretty good i think nice so we're already really close and because the filter and the stroke are both set up together if i came up here and i made this like 15 pixels it's going to increase the over thing if i make it one pixel it decreases them all if we came here and change this we could control the color of it so it's different colors so you can come in with like a maybe a blur that's like a light version of your background or something we'll keep it as intense as we can with something like that maybe we want to reduce the blurry you know you can play around with these we're giving ourselves levers that we can control and you're going to see why this is even better once we come up with our variations later on with that in place our lines are actually looking pretty good but what we want to work on now is our animation a little bit and the animation means that we probably want to change a little bit how we did this because ideally it's not only on hover if we focused on this we'd get it too and actually our focus is a bit weird because it depends on the browser it is going to make a really big focus ring as it stands right now i'm just going to leave it like that and if that's a deal breaker for you again you could reduce the offset here but i think it's in safari it actually won't give you the big focus ring like that it only be on the button so you don't want to do like a reversed offset i wouldn't really recommend taking the focus off because it's not really clear you see the focus with the spin but then the spin goes away so i would recommend leaving a focus ring on there but yeah i'm going to leave it like that because it's still pretty clear what's being highlighted and again maybe you're just once everything is good and you're happy this could get reduced to like a 25 or something like that because then it's very clear what's being selected but you just want to make sure this is always bigger than your blur and everything so we'll leave it big for now and it's an option for you to adjust later on so how can we improve this well there's two things if we look back at the original one when it goes at the beginning of the animation they they're gone they appear and then it disappears again as it's still moving so we have two different things we have to worry about we have the opacity of them to worry about and we also have the movement of them to worry about which we sort of have right now but we're going to make some improvements too so first we're going to tackle the opacity part and then we'll come back and fix the movement just to make sure that they're tied together well and for me the easiest way to do the opacity is to do it rather than focused on each one of these pieces we're going to do it on the entire glow container just because everything is inside of that if you reduce the opacity of the glow container you reduce the opacity of everything inside of it and for this we can't use a hover effect like we did here or a transition anyway because the as the animation is running they disappear again so the opacity has to go up and then the opacity has to go back down again so to do that we're going to create an animation so down here let's do an at key frames and we'll sort out animation at key frames and we're going to do glow visibility so my glow visibility we want to start at an opacity of zero then at say maybe 25 percent we want the opacity to go up to one then we want that opacity to stay at one so let's say it stays until 75 percent we still have an opacity of one and then from 75 percent all the way to the end the opacity is going to go back down to zero so we could leave this as it is here but just a fun little thing on optimizing animation key frames a little bit we could come here and do that and then come here and do a 75 percent we could delete those two the order your key frames are in have no importance whatsoever it's the percentages you put here and just like css selectors you could list though it as many as you want so we're saying at zero and 100 percent we're at opacity one and at 25 and 75 percent we're at sorry zero and then we go to the opacity one and then we're going there to there to there to there sort of making a box so let's add that in glow so we're going to say my glow effect and let's use the is here because we're going to do a hover and focus so this is if you don't know is it just lets us combine selectors together so the anytime we're having a focus or a hover on our glow effect the glow container here we'll get an animation of glow visibility visibility and for now let's do it long we'll do like 5000 milliseconds i was wondering why it wasn't working i didn't spell visibility right visibility i don't know what i wrote visibility there we go get them both the same and there you go you can see that it is working now the animation is too long but uh when i hover on top we can see that it disappears and then sort of comes in so that also means that my glow container let's go find it up here we also want that to have an opacity of zero at the beginning so we don't see it then when we hover on top it comes in and then eventually fades back away now there's another problem if i come off and i go back on there are the animations already like sort of far along right if i come here like it's not starting at the beginning of the animation every time the the opacity one is but not the transition for the the lines moving around so the easiest way to fix that is actually here where we set this up and i'm going to actually take this and bring it down with this just because this is all animation related is here we have our transition and then here we have that hover that we'd set up and let's fix this hover first of all so we're going to say is hover comma focus and then what we can say is the is uh glow whoops glow line and the glow blur so we can combine the selectors both times here just to make it one big selector instead of two different comma separated ones so if i save that we'll get the exact same thing happening we haven't changed anything up until now but what i'm going to do is we have right now our glow blur and glow line have the transition and that means it's transitioning all the time so whether that's forwards or backwards what we can actually do is take that transition and move that transition to only when it's hovering and focused so this way it's working but if i take it off and then i start again it's always going to start back at the beginning of that animation and let's just put my opacity we'll get rid of let's just say my opacity is always one uh and over here too we'll put the opacity up to one so you can see if i go this way they're going forward but anytime i come off the animation's always going to reset back at the starting point and i keep coming off when it's like almost looking the same um but that's because the transition's only happening in one direction the other direction has no transition so there's basically no animation so it just jumps immediately back so we're only transitioning if we're hovering and focusing so now let's go fix up those opacities put that back to zero put this one back to zero and let's fix our speed that we have here because right now we have two different ones happening so we'll come all the way back up here we can do animation speed and let's do like i don't know 1200 milliseconds because the actual animation is kind of fast and then we can come down to where we have our transition we can do bar animation speed and let's just copy that come down here the glow visibility also gets the same animation speed and now they'll both go together now if we come and look at this one again you'll notice it sort of starts slow but the lines look like they're moving at full speed when the animation goes down so just to help with that you could come in with your more like custom timing functions and stuff if you'd want to but for the visibility easing in easing out completely fine for me but what i want to do is here where we have this transition i'm just going to break this off onto separate lines make it a bit easier to see we're going to have our stroke dash offset being transitioned this is how fast it's going and then the last thing we're going to do is we're going to say that it's an ease in and what ease in does it mean start slow get up to full speed and just keep that speed going so when it fades out it's going to look like they're still going at full speed or they will be so we can see it taking off and then sticking there now it's not perfect yet so what we could actually do is increase the distance they're moving a little bit just so they move a little bit faster along the way and maybe this you know we could even you can come in with different numbers here this will influence how fast they're moving so maybe this i put animation speed maybe animation length would be better because that's actually a bit too much we'll do about a hundred pixels there and i think it's pretty much good maybe even an 80 would be a little better that's actually very similar to what the original one was because you can see here it's right as it's that one sort of circling around to here that it disappears again so now we have that here we're just as it's getting up to that point it does disappear and you could play with the the functions here if you wanted to as well so if we did like an ease in out on this one it might give you a little bit closer to what you want it depends you could play around with different timing functions if you want but i think overall the effect here is looking pretty good but we want to be able to customize this a little bit more because right away i think that looks really cool i'm happy that we nailed that and what it got me thinking are like what are some of the other things we could play with here so one of the nice ones is what if you want to change the length of your lines well that's actually pretty easy because we saw this is basically what's controlling the length of our line and as long as this number right if i did this as a 10 and then i did this as a 40 i still have two lines but they're shorter or if i did this one as a 35 and i just want to add this up to 50 so 35 that'd be 15 and now i have longer lines so that's kind of cool so well we could do something with that let's come all the way up here and say uh or maybe we'll do it here just before so we can say glow line length and the default was 20 that we were using so i'll keep that and just because we have glow line color glow line thickness we'll put glow line length with it and so how could we use that custom property over here well this would be my var glow line length right so we have that as one but what about this value so this number is always this 50 pixels minus this because our total always has to be 50 so that makes it nice and easy we can just use a calc 50 pixels minus var glow line length and hit save and now it will look like that but if i come up here and if i change my line length to 30 pixels now i have a longer line if i change it to 10 pixels i now have a shorter line ah well isn't that fun right we can come in with all these different values and play around with it and customize it really easily and now we have all this customization that we can do so what if we came up here and we wanted to create variations so let's add a new one and if you know me you know i sort of like doing variations and other stuff using data attributes instead of using classes you get a hundred percent come in with like a bem style like glow glow effect and then your variation here um i just find the data attributes which i got from cube css so i can do like data glow animation is equal to false and it's more like stating something like i'm saying there is no animation or we could do like a offset that we'll see after and you can come up with other things or even like this could be a slow and then you could have a fast and it's just like sort of states exactly what's happening and it also means you can't have a slow and a fast class at the same time which sometimes you could get conflicting modifier classes at times and this sort of prevents i'm gonna say data glow animation equals false and maybe that we could have a better name for this one but what i'm going to do for this we can come down and because these are all custom properties all we have to do is come and say that my uh glow effect is going to be a data glow animation equals false and for this one because i'm not animating i just want the whole thing to glow so i can just say uh here we had my uh glow line length and remember we had that like 50 minus 50 so uh i could do a line length of i could actually do 50 pixels or zero pixels pretty sure both would result in the same thing uh so my first one is the normal one and then this one just gives me no animation uh we just get like the the glow like that so it's not moving and of course you do a fast and a slow that could play then with your animation speeds i'd have different variations based on that so we have that one there we have that one and another one that i wanted to try and do and it wasn't that bad though it's a little bit more work with some like weird calculations in your custom properties but let's come in with a data and then we're going to do glow offset is equal to true and again this could be like a small and medium a large you could come in with different stuff but i'm just doing a true uh the fun thing with this is if you did put it and switched it to false it would you don't have the css it would work as intended anyway so i'm just going to say true here so we're going to add an offset to this one on the bottom now the offset's a little bit weird because we do need to sort of it's easy to control but we will have to build some extra stuff into it so first let's give ourselves a glow glow offset and the default will be zero and then we can always increase it if we want to now the first thought for an offset would be to do something like if we came on the glow container here people always think like i can just use a scale and so if i did scale 1.1 right then it offsets it because it makes it bigger the problem with scale is you'll notice especially on this one but you'll see it here too if something is a perfect circle or perfect square scale will work perfectly but if something's a rectangle because it's wider it grows more in length than it doesn't height so you end up with these like awkward shapes on stuff if you're using scale so if we can't use scale how could we do this well we have a width and a height here so i could just increase the size so my width is actually going to be plus my var glow offset and it does make for a lot of css on a single line but there we go so we get the glow offset increasing my total size and the default here is zero so it won't actually make a difference if it's zero so let's go take a look we can see here works exactly as it was working before now it's not finished yet but if we come up and we add an offset i'm going to make it pretty big just to make it obvious what's happening because we're going to have a small problem right now where it's working but it's not centered right we're off the center a little bit and it's easy enough to fix over here we have this x and our y values so we want to sort of modify how this is working because we need to offset it a little bit differently than we were before because before it was only based on the container offset but just like here with our width and our height we can just bring that glow offset into these as well now you don't need to do this but i find it just looks a little bit cleaner and easier to read if you add extra parentheses around it i'm pretty sure css does order of operations so it doesn't matter too much but i'm going to do plus and actually this one's going to have to be a calc two because just like this one we had to divide by two we're going to have to divide this number by two as well so my var we can do another calc here and this one will be my var glow offset divided by two once again really long one of the things i've always liked about css is it's easy to keep it all on the screen with it only being really small and i will admit using custom properties in these places when you first look at things can make them look much more overwhelming but it's always worth it because once you sort of take the time to read it and look over it a little bit i find it makes it more clear because you can see what the numbers are rather than just being random values and of course it makes it much easier to control everything all at once instead of having to change numbers all over the place so with all of that in place now if i hit save and we shrink this back down uh that didn't work but it's because these ones these ones should have been negatives uh so we're yeah there we go so now we can see that the offset is actually working and it's it's going the way we want because we we want to go minus that direction to sort of push it back the way it was so now we get this offset that we can put on these if we want to but the default offset will normally be zero so the right here so they work always as they had been up until now as intended and if we come down let's just duplicate this one and change the glow offset is equal to true and then this is me my glow offset and then we can put in a glow offset here of maybe five pixels and so this one's the same and then this one has an offset on it and you can see it's moving around like that maybe 10 actually does make a bit more sense and we have that offset that's coming on there and it looks pretty good and of course you could combine these so we could take this data glow animation and add it to that one and now both of them are there and it has the offset so no problem at all there's no conflicts or anything like that going on so kind of cool for that type of thing too and now the last thing which is the annoying thing with our rx values that we can't actually style with css i tried a whole bunch of stuff with this we can't do it as a custom property that gets brought in maybe one day we can do it with an attribute thing or maybe one day safari will just update and this will work but it actually in a way is more convenient not having it styled here only for the reason that i'd rather the glow effect be separate from my button and i could put this glow effect on different things and it would still work as long as i mean it is a bit annoying because you have to have the parent glow effect and then you need the child svg here so for this to work you need both of those so it maybe limits your use cases a little bit but um so it's up to you if you'd want you could include them all together but again it doesn't work out in safari right now anyway so now if we turn off those rx's you can see we just end up with square borders which look really ugly and we need those rx values to come in as attributes here so either if you have a design system where everything is very consistent you could just come in and put the rx is equal to what you want and know that it's going to match whatever the border radius on your element actually is definitely an option that would work let's just come in here and do like what i had i don't know is it 18 or 20 pixels let's just do 18 and then i'll copy that here and you'll see that it's working perfectly or i only did it on this one so you can see it's working and matching on that one so if it's always going to be consistent that's perfectly fine but if it's not something that's always going to be the same value maybe you have it in m's so as your button size is smaller or bigger or you're using it in different circumstances you want that to adjust well then we're actually going to be setting these with javascript instead which sucks but it is what it is i've tried setting them with custom property values as like my rx is equal to as a custom property here it does not work so to me having to use javascript for this is not ideal but uh it's not that bad so let's come in and create a function here in my javascript and i this would be something like my javascript is linked here and i'm deferring it so this would only happen after the rest of the page is loaded and it's going to be a pretty small thing so it's not like it should have much of an impact on performance or anything like that so let's create a function of set glow effect rx and then for this function let's say well what's it going to do or what does it need the first thing it needs to do is find all of the buttons that have a glow effect on them or yeah i guess it'd be buttons or whatever it is find anything that's using that glow effect class so const glow effects can be equal to a document dot query selector all and we can find anything that has the glow effect class on it now this is going to return a node list and we want to go through every one of those and do something to them which is to set the rx value so we can say glow effects for each and so when we do this we're going through this entire node list and for each one of those things in the list what are we going to do so first we can name whatever each one of those things in the list is so i'm just going to be glow effect singular you can just put effect you could put anything here basically it's the name you're giving it and we'll use an arrow function to say what we're going to do to that glow effect now what we want to do is get the the border radius of each one of them so and set it as an rx value so we'll just do const of rx is equal to remember this i'm using const here it could be a let but it doesn't matter that it's a const because it's running it separately each time so it's not like it's stuck at one value i know sometimes i get questions about that um so the rx we're going to say that we're going to do we're going to do a get computed style of our glow effect glow effect got to spell it right now when we do this it's actually going to get every single value that's applied to that property so we don't want all of them we only want our border radius so we can just say here border radius and it goes into camel case when you do it when in javascript land here so we can get the border radius that way for each one of them and it's going to be individual for all of them no problem there and then we want to apply that to our rectangles so the other thing we are going to need here are those rectangles so here i'm going to say my glow lines um we could you know we could do rex or whatever we want but we're going to do this now similar to here where we did a document query selector all we could use that but in this case i don't want to get all of them i only want to get the ones that are inside like an individual button or whatever it is so wherever it finds that glow effect i only want to get the lines for that one so to do that instead of searching through the entire document we can say glow effect dot query selector all and then do my rect here so just use an element selector and that would work perfectly fine so it's only going to look for the ones inside each one and we're going to then apply this rx value that we've gotten from the button itself awesome so how can we actually apply these now so for the glow lines we do have two of them if we had one this would be a little bit easier but we're going to do a glow lines and once again so this time we need to say for each line we're going to run through and do an arrow function once again so we're going to select each line we're going to do a set attribute and what attribute are we setting we're setting our rx attribute that's on there like we saw before and what are we setting it to we're setting it to this rx right there we could make this an immediately evoked function expression i think is what we call it so to do that you just wrap the entire thing inside of parentheses and then we add the parentheses here at the end and now same as before it should be working perfectly fine and let's just come over to my style over here right now and we'll see this in two different ways but let's come back here if i update my border radius hit save and we go take a look we can see that it is updated over here and then let's just make this zero hit save you will have to refresh the javascript runs again people won't be changing border radiuses on the fly we can see it is updated on those there so the nice thing now is whatever the element that has the border radius on it is controlling it plus of course it will work in safari as well and with that back to how we had it we can come take a look and we can see that everything is working there and there's a lot more customization a lot more fun you can definitely have with these and if you want another cool glowy button effect i have looked at one including like a reflection on the ground in the past as well so that video is right here for your viewing pleasure and with that i'd like to thank my neighbors of awesome jan johnny michael 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