Create a neon button with a reflection using CSS

hi there my name is kevin and if you're new to my channel here we learn about how to make the web and how to make it look good with weekly tips tricks and tutorials with a really big focus on css and i just love exploring css diving into it but also doing things the right way and in things that won't hurt performance and one really fun way to do it is playing around with buttons and hover effects and focus states and stuff like that so in this video we're going to create this fun button here we have a whole bunch of things going on we have the button itself we have the glow on the ground we have the glow coming off of everything that intensifies when we hover and the background's changing we're going to look at how we can do all of this without sacrificing any performance we can have buttery smooth animations on everything that we're doing we can do things the wrong way we can do things the right way i want to make sure you are doing things like this the right way even if it's not exactly like this button that we're going to be creating there's a lot we can learn from creating this that you can take and use in your projects every single day so let's go and dive into that so we are here in vs code and as you can see i have started with a little bit of stuff here but there's not very much i've linked to a google font i've linked to my style sheet and here we have a link with a class of a neon button on it and if we go and look at my css i've done a few things i've declared my colors here with custom property we've reset our box sizing and then here we just have a little bit of stuff that's going to place it in the middle and i've set a background and a color on here as well as my font family so we're ready to rock and roll with this and just worry about styling the button itself uh so let's go and take a look at what we're going to do so the class we had was neon button like that and let's first give it the color of our color neon that i wanted like that so we can see it and we want this to be a button so at the top of these i'm also for now just to make it so it's not this super tiny thing we can't see let's boost up the font size a little bit so you guys can actually see it there and just because my head is kind of close to that let's also do some padding on the right side of like 10 rem just so it moves it over a little bit like that and you can see it a little bit clearer and we have my neon right there um so normally i wouldn't have the font size there but we'll leave it there just so we can see it a little clearer and what do we want to do for buttons i usually start with a display of inline block just to make sure and this is not specific to this tutorial but it's i think a useful one to have um and also a cursor of pointer because who knows what's going to happen if you have this on like a regular button rather than a link and we also undo a border actually we're gonna overwrite the border right so we don't need to reset the border uh we do want to do a text decoration text decoration of none right there and we're starting to get there this looks a little bit like comic sauce this font i didn't realize that when i picked it but that's alright it's gonna it's gonna look good i think um so we want to now set the border on there so we can come in with the uh border and my border will be my var color neon we'll do like four pixels and whoops we want that to be outside of here four pixels solid and there we go and the reason i'm putting that now is just so i can actually take a look uh here and come on and say that we want to do our padding and we can come on here with like a 0.25 m and maybe a 1.25 m on there and maybe even that's a bit big and the reason i'm using m here is because that way if i change my font size the padding will adjust with it so and actually maybe we want to do the same thing here for our border now that i think about it uh so four pixels is 1.25 m if it was 16. so now if this gets bigger you can see the border is actually increasing with that and if we go bigger the border increases with that as well so it helps keep everything relative to the font size that we're using so we can drop that back down to four and we are almost ready to rock we also want a border radius on here and the border radius we want maybe a 0.25 m on that as well just to make it a little bit rounded uh like that and we're getting there we're pretty good uh now we need the glowy effect and we need to make it look like it's glowing so we're going to start with the text itself because for the glowing effect we can do a text shadow and we want to use the same color and even here i could instead of using the var we could do like current color which just means you use the color of the text current colors like the og of variables in css uh pretty much but you know so whichever whichever one you want we'll go with current color here too current color uh current color like that and then what do we want to do with current color uh we can have the text shadow be the current color except i'm talking about current color but we need to give it something so we're going to do a zero offset zero offset and then like a one m of blur and again i'm using m's as my blurs here because i i want it to change based on the font size itself um text shadows aren't the best when it comes to actually like making it look like a perfect glow um but we're going to make do with that anyway maybe what we could do actually to make this look a little bit better is we'll keep that one we're gonna put two text shadows on here so we're gonna have one text shadow zero zero and then we're gonna have a point i think we'll do is actually 0.125 m here and then this one's just gonna be white um and then this one will be a bigger one and we want to comma separate those so we get a white one followed by the other one the only problem with white is it's really white so i'm actually gonna click here to go to hsl just because hsl is easy to work in let's turn word wrap on so we can see everything and when we're using hsl and this is part of the new syntax is you can just do spaces instead of commas so 0 0 these two actually don't matter for white and then it's a hundred percent means a hundred percent lightness it's going to be white and then we put an alpha after a slash and so this point two five maybe and let's just try bringing that up to point five just to get a little bit of like a brighter look almost like it's fading out and you can definitely play with these values again i have a lot of trouble getting text shadows to look really good um but you could you know play around with the values a little bit and see if you can get it just to look a little bit brighter um i'm doing a really small one here just to make it look as bright as i can really in close and then that it's like fading out a bit uh maybe it's not perfect but we'll i'll stick with that for now the outer one is where it's much easier to get a nice shadow on that so what we're going to do here is then do a box shadow um now for the box shoulder we're going to want a couple though so we're going to do a zero zero let's try one m and then a zero we don't need that one we can omit it but we'll put it there anyway and then we'll do a var of color neon let's save and see what that looks like it's a little bit big so maybe we could drop this down to a point five or so um but obviously that doesn't really look like it's it looks like it's glowing from the back but not in the front it actually looks super dark in the middle now right um and this is just sort of optical illusion stuff and if this is the style you want it looks like it's backlit this is kind of cool actually it gives it a bit of depth and it's kind of interesting but it's not what i want to be doing right now so what i'm going to do is also put a comma here and we're gonna have the exact same uh one actually let's just copy paste that the exact same thing but i'm gonna write inset at the start inset like that hit save and now it looks like it's glowing the whole way around instead of only glowing on the inside and again we're using m on this to keep it relative so with the font size changing the blurs on all of this will go with it so the blurs are always adjusting uh on the fly like that so i think that's pretty good i'm actually going gonna drop this down to like a point two um it was way too white maybe a point three um just to give it a little touch and we'll drop that back to three or four all right so now we have a glowing button i think it looks pretty good i'm happy with what it's looking like but it'd be a lot more a lot more interesting if we had a bottom glowy thing going with it to make it look like it was in an actual space so let's go and do that next and we're going to do that with my all-time favorite thing which is pseudo-elements so neon button uh we'll do it before if you're not used to suit elements i have a really in-depth video you can check out the card that is right there where i dive into them and really explain how they work and so what we want is uh on this when you have a suit element you always have to have a content property we're also going to come on this guy and give it a position of absolute just because it makes it a little bit easier and if you're doing position absolute there i'll do a position of relative here um just so it's not relative the page making sure the neon button itself stays as the containing block for my pseudo element here um and just so we can actually see what's going to happen let's just start by giving this a background of red i'm going to give it a top of zero a left of zero a right of zero and a bottom of zero just like that and now we see it fills up that whole space um the thing is if you want to set it up like this you can't actually move it down by moving the top because the bottom is set to zero uh so one thing you could do is top left and then here instead of doing it like that we could say that the width is 100 and that the height is 100 and it's going to look exactly the same but the advantage with that is we could come in here and say like the top is 120 and it'll move it down by that much uh if you don't like that idea you could also just come in with a transform and translate it down that would work just as well we're going to be using a whole bunch of transforms on this anyway so it's really up to you how you want to set this up to start with now that it's in the right spot we can actually change this to my var color neon and then what we want to do now is the fun stuff of making it look like it's a glowy thing and what we're going to do for that is a transform and we're going to use a whole bunch of transforms on this we're going to give it a perspective and if you're going to use perspective it has to be declared before the things that you're doing on perspective and i'll look at what i mean by that i'm just going to put one m here and it's a number that we could play with a little bit um in this case it's actually defining how far away we are from the thing um so you know it could be useful to play with that a little bit but i'm just going to leave it here because we'll again we'll see if we need to to modify that at all what that opens up is rotating on the x-axis um our axis axis so what we want to do is let's try 40 degrees and hit save and look at that now if we didn't have perspective on here you're gonna see it doesn't rotate it that way it just sort of flattens it out uh right so like here if we did zero it's like that and we're if you're rotating it without perspective it's like taking a piece of i don't know there's no perspective so it can't change right you're on a two two dimensional thing so it looks like it's just flattening out instead of actually getting longer um terrible description but hopefully you know what i mean so by adding perspective here it's going to work and just so you know you have to put perspective first so if i do the rotation then the perspective it doesn't work so perspective first then the rotation um so we're sort of we're setting that and here this is where as i said you can really play with the distance you are away from something so the smaller the number the more like here if we did like a 0.125 you can see it's all it's we're so close to the bottom it's like extending out forever and the bigger this number it's almost like we're higher up and we're looking at it from a higher a higher height so if we did 50 it looks almost flat there's like maybe that's a bit too much but 30 you know it's starting to turn a little bit so something like one i find you know we're a little bit off so we can see it like that maybe even a two would be fine uh we'll go with one actually i think one's pretty good um so we can have that and we can also do a translate on the z-axis as well now so if we did one m it's uh oh yeah this is like up and down right so the z-axis is moving it up and down so we moved it up one m uh which means the perspective like these two are gonna work together a little bit um so if we did a negative one m um it's gonna move it down more actually i guess we don't really need that one but another one that you could open the door to um i'm really not like the champion of these 3d things but just to show you that these are things you could play with and you could definitely modify from here uh i think and if we do want to like exaggerate this we could also play with the scale so if we did a 0.25 here like we can smoosh it even more without it being so this we're smooshing it so it's keeping the shape but it's being a bit more smooshed now maybe if i was better with perspective i could do this without scale um but i find just playing like you can sort of get more of the shape maybe that you want and there we go so that's looking alright but of course it's not blurry and i guess we could do it with a box shadow somehow but that's going to be kind of awkward to do so what i actually want to do here now is use a filter and we can do filter and on the filter that opens up blur and just how much do you want to blur it by you throw a number in there and look at that it's doesn't that look super cool i love that so much this number really depends on how you've set things up and what you want to achieve with it and i just think like right now that's looking fantastic to me um i'm using m again just so everything changes based on this font size but it will have an impact um based on your font size it sort of looks like it's getting further away and closer to us now because of all this 3d stuff going on with that but i think it's really cool and it's working pretty good um so what else do we need with our neon button here well i think there's a couple things that would be kind of cool first we want to have some sort of hover effect on there so i'm actually going to move up there's two things actually i think what we're gonna do let's make this blur a little bit smaller maybe or i'm gonna let's make it a little bit smaller because what i want is i want it to become more intense when we hover on top as well and you'll see why in a second so let's also drop the opacity on this to like a point seven maybe something so it's still there but it's just less intense and maybe there we go i think that looks pretty good um and then what we want to do let's just come here i guess i mean so we into our neon button hover uh hover so when we hover on top i want the background uh to actually oh this is current color is gonna to muck us here i think my background is gonna become my var color neon uh i said it's not working but i wasn't hovering so there we go so we can see when i hover that's there now what i also want to do is do a color of my dark color so that would be my color bg like that uh whoops there we go just so we can actually see when we hover on top um and we're just going to put in a text shadow of zero because it looks really awkward when we're hovering on top now my background is act my is actually changing so i should have not used current color on that one i do apologize but i do like current color it can't it does have its uses just not in this this spot there we go so when we do that now my text shadow is still there text shadow uh do we have to say none there we go uh we have no text shadow coming on now when we're hovering on top we're just getting that now when we do this i think it's looking good already i think it's a nice you know just giving us a bit of an effect we should actually do one more thing here which will also be a neon button um focus like that uh so the reason that i want to do that is just so when i come here i can actually tab and tab off so if i'm keyboard navigating it's also working so that's good um but i think it'd be good like the whole thing is lighting up i think it would make sense for the glows to intensify so there's different ways we could do it one of them definitely would be to play with the shadow we already have there but as i've explored in another video if you're trying to animate shadows it can actually become pretty janky and uh in this case i'm not sure necessarily but animating shadows is a really good way to get janky websites and i don't want you to have a janky website i want you to have really nice websites with all your animations running super smoothly and so that means instead of animating the shadow itself we're going to come in with another little trick so to do that what we're going to do is here we already have our before which we're using for our shadow underneath here oh and you know what we're going to do see how if i go on the shadow here it's actually activating so before i get to that let's fix that so that just means on the before what we can actually do is come here and say that pointer events is none so if we're on the here it works but then if we're on the after it's not activating the button because that's kind of weird right so we'll turn off our pointer events on that before um so what we're going to do is we're going to come down we're going to say our neon button after and actually i'm going to move we're going to keep all our hover and focus stuff down here at the bottom so let's move this up to here um so on my neon button what we want to do on the after once again we need to do this we could dry our code up a little bit here if we wanted to just by combining a few of these values together but um because once again we are going to want a position of absolute so let's set that position of absolute just so we can actually see what's happening i am going to give it a background color so top bottom zero left zero right zero and then we can come in with a background of uh let's do yellow green just so it's a little different from what we've been looking at so far and we see it there and what we're going to do is we're actually going to give this a box shadow of let's do it at 0 0 i'm going to do like a 2m 1m and then my variable which was my color neon right there and like well maybe that's a bit too much um so maybe it's a one and a point five something so it's a lot more is basically what i want to do we could inc that looks better but maybe my blur could still be a bit bigger there we go i think that looks pretty good now we can take off our yellow green now um so what we're going to do now is we're going to actually say opacity is zero and it's going to disappear you're going kevin that seems a little weird but this is where what you can do is come in with your neon button hover after so when we hover on our neo mutton the after will get an opacity of one and there we go you can see the whole thing is brightening up like that and the reason we want to do that is for those crystal clear and really nice transitions so now we can do a transition of opacity and it's going to be pretty fast um linear will work fine for this so you can just see the whole thing sort of like gl the glow intensifies a little bit i want it to be pretty fast just because the background is instantly changing um so i mean you could also we could change that if we wanted to uh let's do the whole thing then where is it this one uh so we could even come here and say transition background back ground color 100 milliseconds linear just so it all matches and then it looks like it's like turning on when we hover and the shadow or the glow is intensifying as that color is switching over now background color is not something that fits into the the ones you necessarily want to be animating but that is an option actually one way we could do it without that now that i just thought of it is instead of doing that uh is we could look at this so i wasn't planning on doing it this way but we could actually say that my neon button on hover hover we could say that the background color doesn't actually change so when we hover it's doing this but what we could do is use this after this after could have the background color on it background background color of my neon so now there you go the color can actually come through now the problem is it's going on top of my text so we can just throw a z index z index on that of negative one and there we go so as the glow comes in that transition will actually come with it so a little bit more on the performance level there too so that's kind of good awesome now the last thing we're going to do is we can also manipulate this guy down here a little bit when we do this because it would be nice like it's actually it looks like it's getting brighter just because the overlapping of that original one that happens to be hitting it but what we could also do is we could have this one down here intensify a little bit so that way it's intensifying there so now we just want to intensify this and if you remember when i set this up what we did is we actually said that it was a neon button uh we'd set it to have a this was our before we set it to have a lower opacity so now when we hover we can do an opacity of one and the whole thing including that shadow that's on the ground will intensify with it and i think one thing we just need to do is also uh we'll set our focus here so i'm just going to duplicate that line duplicate that line set this one to my focus faux focus so we're getting everything that we need to get put our commas there hit save and there we go and it can also go with my keyboard navigation as well and if you enjoyed this video i think you really like this one as well where i look at really fun and cool things you can actually do with the outline and outline with buttons and hover effects and other stuff there as well so if that sounds good go and check it out and with that a really big thank you to my enablers of awesome zach and randy as well as all my other patrons for their monthly support and of course until next time don't forget to make your core on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 281,128

Keywords: Kevin Powell, css, html, tutorial, css button, css neon, css reflection, css glow, css hover, css focus, html neon, css tutorial, css style button, css neon style, css glow style, css animated glow

Id: 6xNcXwC6ikQ

Length: 20min 59sec (1259 seconds)

Published: Fri Apr 30 2021