CSS neon effect button with flashing-border effect
CSS neon effect is a popular design trend that imitates the look of neon lights. It can be used to create eye-catching and dynamic text or graphics on a webpage.
This effect is a visual design effect that mimics the appearance of neon lights, typically using bright and bold colors that appear to glow or shine. It’s a popular trend in web design and can be applied to text, graphics, buttons, and other UI elements to create a dynamic and eye-catching look.
The effect is typically created by adding multiple layers of text shadows with varying colors, spreads, and blur distances to create a glowing effect. The shadows are usually positioned to create a sense of depth and dimensionality, and the colors used are often bright and vivid, such as pink, blue, green, and yellow.
The CSS neon effect can be combined with other design elements, such as animations, transitions, and gradients, to create even more dynamic and engaging visuals.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS neon animation button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #050801;
font-family: 'raleway',sans-serif;
font-weight: bold;
}
a{
position: relative;
display: inline-block;
padding: 30px 50px;
margin: 90px 0;
color: #03e9f4;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
overflow: hidden;
margin-right: 50px;
}
a:hover{
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
-webkit-box-reflect:below 1px linear-gradient(transition, #0005)
}
a:nth-child(2){
filter: hue-rotate(270deg);
}
a span{
position: absolute;
display: block;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#03e9f4);
animation: animate1 1s linear infinite;
}
@keyframes animate1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
a span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 1s;
}
@keyframes animate2{
0%{
top: -100%;
}
50%,100%{
top: 100%;
}
}
a span:nth-child(3){
bottom: 0;
right: 0;
width:100%;
height: 2px;
background: linear-gradient(270deg,transparent,#03e9f4);
animation: animate3 1s linear infinite;
}
@keyframes animate3{
0%{
right: -100%;
}
50%,100%{
right: 100%;
}
}
a span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#03e9f4);
animation: animate4 1s linear infinite;
animation-delay:1s;
}
@keyframes animate4{
0%{
bottom: -100%;
}
50%,100%{
bottom: 100%;
}
}
For More Tutorials Please Click Here
