neon button css code example
Example 1: css glow effect
div {
width: 150px;
height: 150px;
background-color: #fff;
box-shadow: 120px 80px 40px 20px #0ff;
}
Example 2: neon button css
<!--HTML CODE: -->
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
<!-- CSS CODE : -->
body
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: consolas;
}
a
{
position: relative;
display: inline-block;
padding: 15px 30px;
color: #e61062;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover
{
color: #ffffff;
background: #e61062;
box-shadow: 0 0 10px #e61062, 0 0 40px #e61062, 0 0 80px #e61062;
transition-delay: 1s;
}
a span
{
position: absolute;
display: block;
}
a span:nth-child(1)
{
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#e61062);
}
a:hover span:nth-child(1)
{
left: 100%;
transition: 1s;
}
a span:nth-child(2)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;