<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.