How to use pure CSS to achieve cool neon light effects?

Recently, I paid attention to the CSS Animation Effects Tutorial series on YouTube, which introduces a lot of interesting CSS animation effects. The first one is the cool neon light effect. Here is a simple record and share of the realization ideas.

This is the effect to be achieved:

It can be seen that when the mouse moves into the button, it will produce a neon light effect; when the mouse moves out of the button, there will be a beam of light moving along a fixed track (outside the button).

Realization of Neon Light

The realization of neon light is relatively simple, just use multiple shadows to do it. We add three layers of shadows to the button, and the blur radius of each layer of shadow from the inside to the outside increases, so that multiple shadows are superimposed together to form a neon-like effect. This code is as follows:

HTML：

 <div class="light">
    Neon Button
 </div>

CSS：

body {
 background: #050901;   
}
.light {
  width: fit-content;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}

The final effect is as follows:

Realization of moving beam

Although it seems that there is only one beam moving along the edge of the button, in fact this is the superimposed effect of the four beams moving in different directions. The directions of their movement are: from left to right, from top to bottom, from right to left, and from bottom to top, as shown in the following figure:

In this process, there is an intersection between the light beam and the light beam. If you only look at the edge of the button, it looks like there is only one light beam moving in a clockwise direction.

The following are some points that need to be paid attention to in the specific implementation:

• The four beams correspond to div.light . The initial positions are the leftmost, uppermost, rightmost, and lowermost buttons of the button, and repeat movement in a fixed direction.
• The height or width of each beam is very small (only 2px), and there is a gradient from transparent color to neon color, so the appearance will have a condensing effect (that is, it does not look like a complete line)
• In order to ensure that we see a clockwise movement, the movement of the four beams is actually in order. First, the beam above the button starts to move, after a period of time, , the right beam moves, After a period of time, , the lower beam moves, after a period of time, , the left beam moves. There is a delay between the movement of the beam and the beam. Take the upper and right beams as an example. If they start to move at the same time, the movement distance on the right side is less than the movement distance above, which will cause the two beams to miss the opportunity to intersect. , What we see will be broken, disjointed beams. Since the moving distance of the right beam is relatively short, in order for the upper beam to "catch up" with it, we have to delay the start of the right beam, so we need to give it an animation delay; for the same reason, the remaining two beams should also be There is an animation delay. The difference between multiple animation delays is about 0.25 seconds.
• It is enough to show the light beam on the edge of the button, so set an overflow hiding div.light

code show as below:

HTML：

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon Button
</div>

CSS：

.light {
  position: relative;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  position: absolute;
}
.light div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
.light div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.light div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.light div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

In this way, the effect of the picture at the beginning of the article can be achieved.

Neon lights of different colors

What if you want neon light effects in other colors? Do I need to revise the relevant colors again? In fact, we have a simpler method, which is to use filter:hue-rotate(20deg) modify div.light and all the internal elements at once.

The hue-rotate() CSS function rotates the hue of an element and its contents.

The final effect is as follows: