How to use CSS to achieve cool button neon effect

As you can see, when the mouse moves over the button, it creates a neon-like effect. When the mouse moves over the button, a light beam moves along a fixed path (around the button).

The realization of neon lights is relatively simple, with multiple shadows to do. We add three layers of shadows to the button, each with an increasing radius of blur from the inside to the outside, so that multiple shadows add together to create a neon-like effect. The code for this is as follows: HTML

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

Copy the code

css

body { background: #050901; } .light { width: fit-content; padding: 25px 30px; color: #03e9f4; font-size: 24px; text-transform: uppercase; The transition: 0.5 s; 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; }Copy the code

Results the following

While it looks like there is only one beam moving along the edge of the button, it is actually a superposition of four beams moving in different directions. The directions of their movement are as follows: from left to right, from top to bottom, from right to left, and from bottom to top, as shown below:

In this process, the light beams intersect with each other, and if you look at the edge of the button, it looks like only one light beam is moving clockwise. Here are a few things to watch out for in a concrete implementation:

1. The four beams correspond to the four sub-divs respectively. The initial positions of the four sub-divs are the most left, the most top, the most right and the most bottom of the button respectively, and they move repeatedly in a fixed direction

2 Each beam is small in height or width (only 2px) and has a gradient from transparent to neon, so the appearance has a tapering effect (i.e., it doesn’t look like a complete line)

3 To ensure that we are seeing a clockwise motion, the motion of the four beams is actually in order, first the beam above the button begins to move, after a period of time, the beam on the right moves, after a period of time, the beam on the bottom moves, after a period of time, the beam on the left moves. There is a delay in the motion between the beam and the beam. For example, if the above beam and the right beam start to move at the same time, the right beam will miss the intersection because the distance of the right beam is less than the distance of the upper beam, and we will see the disconnected and incoherent beam. Since the right beam has a short travel distance, in order for the upper beam to “catch up” with it, we need to “delay the start” of the right beam, so we need to give it an animation delay; Similarly, the remaining two beams should also have an animation delay. The difference between multiple animation delays is about 0.25 seconds. **4,** Just need to display the beam at the edge of the button, so give div.light an overflow hide code as shown in HTML

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

Copy the code

css

.light { position: relative; padding: 25px 30px; color: #03e9f4; font-size: 24px; text-transform: uppercase; The transition: 0.5 s; 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.25 s; } .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.5 s; } .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.75 s; } @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%; }}Copy the code

This will achieve the effect of the picture at the beginning of the article.

I formed a front-end learning exchange group to learn front-end technology. Share learning materials for everyone, match learning partners for everyone, organize everyone to carry out project practice regularly. If you want to join us, you can click the link to join the group chat.