Hello, in this tutorial, I will show you how to create a NEON button in minutes.
Neon Button
Building a NEON button
There is an outer and inner glow around the borders to imitate light coming out from a fluorescent bulb.
There is also light underneath the button to make it seem like light is hitting the ground.
When we hover over on the button, the button will turn on like a light bulb and lighting effects are enhanced.
Setting up the HTML Page
Begin by adding a button on the page and apply the neon-btn class to it.
Building the CSS
Then create a CSS file and add it to the HTML page.
<link rel="stylesheet" href="./index.css">
In the CSS file, create a variable for the glow color, glow spread color, enhanced glow color, and the button color.
Now that we have our variables, let’s center the button so we can see it better.
Add the selector for the body element. Set:
The width and height to match the dimensions of the window.
Background color with btn-color.
Display to flex
Justify content to center.
Align items to center.
Decorating the Button
For the next part, we can begin decorating the button.
Add the selector for the neon-btn. Set:
Outline to none to remove the outline
Border to .25em solid var(--glow-color)
Padding to 1em 3em
Color to var(--glow-color)
Font size to 1.5em
Font weight to bold
Background color to var(--btn-color)
Border radius to 1em for the rounded edges
Adding the Glow Effects
Now that we have a firm structure for a button, we can start adding the effects for the outer and inner glow. To do this, we need to use the box-shadow property.
In the preview, the outer glow has 2 layers, the first layer is a bright layer that is used to bring out the glow, and the second layer is a darker layer behind it to make it seem like the color of the glow is spreading out.
To add the first layer, put 0, 0 for the first 2 values. This represents the x and y position of where the box shadow will start.
Then use 1em for the blur distance to make the shadow lighter and then .25 for the spread radius to make the area closest to the border firmer.
For the last value, set the color of the glow using var(--glow-color).
box-shadow:
0 0 1em .25em var(--glow-color)
For the larger layer outside, we'll do the same, except, we need to increase the blur and spread radius so it’ll be larger than the first one.
box-shadow:
0 0 1em .25em var(--glow-color),
0 0 4em 1em var(--glow-spread-color);
To add the inner glow, add a third line for the box-shadow and then add inset in front of it. This will make the shadow appear on the inside of the element.
You can play around with the numbers to see what you like, but I will use .75em and .25em.
box-shadow:
0 0 1em .25em var(--glow-color),
0 0 4em 1em var(--glow-spread-color),
inset 0 0 .75em .25em var(--glow-color);
The last thing to finish up the button is to add a glow for the text of the button.
Use the text shadow property and then use 0, 0 for the first 2 values to represent the x and y position. Then use .5 for the blur and var(--glow-color) for the shadow color.
Creating the Glow on the Floor
Now that the button is complete, the next step is to create the glow underneath the button.
Add another selector for the neon-btn and then use the after pseudo element to add additional content to the button without modifying the original.
.neon-btn::after {
}
Set:
Content to "" since we just want it to create an empty box.
Position to absolute
Top to 120%
Left to 0
Width and height to 100%
Background color to var(--glow-spread-color.)
After, set the position of the original neon-btn selector to relative so the content box will be positioned relative to the button and not the window.
.neon-btn {
outline: none;
...
position: relative;
}
If we take a look at the button now, there will be box underneath the button.
We’ll use this box to create the effect that light is hitting the ground.
To do this, we just need to use 3 properties: filter, opacity, and transform.
For filter, set the blur to 2em. This will give the box a good blur effect.
For opacity, set it to .7 so it will fade out more.
filter: blur(2em);
opacity: .7;
If we compare this to the preview, the effects are not as noticeable. When light hit the floor at this angle, the glow should spread in an arc, so it looks like there is a floor and not just a wall.
Add the transform property.
The first transform is perspective(). Set it to 1.5em. This will allow us to do 3d rotations.
For the second transform, use rotateX() and rotate it by 35 degrees.
transform: perspective(1.5em) rotateX(35deg);
If we take out the blur and opacity effect, you can see how the box is rotated in the X axis and that it seems like the box is arcing out.
For the 3rd transform, use scale to flatten the effect.
transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
If we re-apply the blur and opacity, it will look like how we want it to be.
Adding Hover Effects
The last part to complete the button is to add the hover effects to turn on the button and intensify the glow.
Add another selector for the neon-btn and apply the hover pseudo class to it.
When we hover over on the button, we want to swap the color of the button and text, so the colors are reversed.
Then to intensify the glow, we just need to copy the box-shadow effects from original neon-btn selector and increase the spread radius of the outer glow.
The higher the value, the more intense the glow will become.
That is all for this tutorial. If you find this helpful, please like, share, and subscribe to support the channel.
Download the project here
https://codeible.com/coursefiles/buildinganeonbutton
