Create a Neon Light Effect Button with Hover Effect using Elementor

 

 

Code snippet for Neon Light Glow:

selector{
    --color: #FF00D5;
}

/* NEON LIGHT GLOW */
selector a{
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--color);
    box-shadow: inset 0 0 0.5em 0 var(--color), 0 0 0.5em 0 var(--color);
    transition: box-shadow 2s !important;
    position: relative;
}

 

Code snippet for Glowing Hover Effect:

/* GLOWING HOVER EFFECT */
selector a::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 2em 0.5em var(--color);
    opacity: 0;
    transition: opacity 100ms linear;
}
selector a:hover::after{
    opacity: 1;
}

 

Code snippet for Button Reflection:

/* BUTTON REFLECTION */
selector a::before {
  pointer-events: none;
  content: "";
  position: absolute;
  background: var(--color);
  top: 120%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
  filter: blur(2em);
  opacity: 0.7;
}
selector a:hover::before {
  opacity: 1;
}