<div class="container">
<a href="">Neon button</a>
</div>
html,
body {
height: 100%;
width: 100%;
background-color: #021946;
}
.container {
height: 100%;
display: flex;
align-items: center;
}
a {
display: block;
margin: auto;
padding: 1rem 1.25rem;
font-family: sans-serif;
font-size: 1.5rem;
text-decoration: none;
text-shadow:
-2px 4px 4px #091243,
0 0 10px #00D0FF,
inset 1px 1px 1px white;
color: #1FFFFF;
border: 2px solid;
border-radius: 4px;
background-color: transparent;
box-shadow:
0 1px 2px rgba(0,0,0, 0.6),
2px 1px 4px rgba(0,0,0, 0.3),
2px 4px 3px rgba(3,0,128, 0.3),
0 0 7px 2px rgba(0,208,255, 0.6),
inset 0 1px 2px rgba(0,0,0, 0.6),
inset 2px 1px 4px rgba(0,0,0, 0.3),
inset 2px 4px 3px rgba(3,0,128, 0.3),
inset 0 0 7px 2px rgba(0,208,255, 0.6);
animation: flickering 5s infinite;
}
@keyframes flickering {
0% {
border-color: transparent;
opacity: 0.2;
}
2% {
border-color: #1FFFFF;
opacity: 1;
}
4% {
border-color: transparent;
opacity: 0.2;
}
8% {
border-color: #1FFFFF;
opacity: 1;
}
28% {
border-color: #1FFFFF;
opacity: 1;
}
30% {
border-color: transparent;
opacity: 0.2;
}
36% {
border-color: #1FFFFF;
opacity: 1;
}
100% {
border-color: #1FFFFF;
opacity: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.