Neon Button
Hello! Im following Kevins Tutorial for the neon button with reflection, Im between 6:20 and 7:39 and this is my CSS code so far. Every time I update my live server it is not showing the glow that the button should have, A picture and links down below any help would be appreciated!
:root {
--clr-neon:hsl(317 100% 54%);
--clr-bg: hsl(323 21% 16%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
header{
min-height: 100vh;
display:grid;
place-items: center;
background: var(--clr-bg);
color:var(--clr-neon);
}
.button-1 {
font-size: 4rem;
display: inline-block;
cursor: pointer;
text-decoration: none;
color: var(--clr-neon);
border: currentColor 0.125em solid;
padding: .25em 1em;
border-radius: 0.25em;
text-shadow:0 0 0.125em hsl(0 0% 100% / 0.5), 0 0 0.45em currentColor;
box-shadow: inset 0 0 05.em 0 var (--clr-neon), 0 0 0.5em 0 var (--clr-neon);
}
Youtube link https://www.youtube.com/watch?v=6xNcXwC6ikQ&t=50s
Kevin Powell
YouTube
Create a neon button with a reflection using CSS
A look at creating a neon button effect using CSS, including a glowing reflection on the "ground", and a little dive into the world of performance as well.
Performance link I mentioned in the video: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
The code: https://codepen.io/kevinpowell/pen/QWdRzON...
3 Replies
in the box-shadow, you have a space between
var and (--clr-neon)when you have issues like this, try to use the inspector. (f12)
When you select the element, you can see if certain styles are applied or if there may be some issues
Here I saw there was something wrong with the box-shadow. So I knew that I had to check that
Thank you! I will