/*estilo do botão*/

 

.neon-bt_f {

  position: relative;

  display: inline-block;

  padding: 10px 20px;

  color: #1e90ff;

  font-size: 16px;

  text-decoration: none;

  /*text-transform: uppercase;*/

  overflow: hidden;

  transition: 0.2s;

  /*margin-top: 40px;*/

  letter-spacing: 4px

}

 

.neon-bt_f:hover {
  cursor: pointer !important;

  background: #1e90ff;

  color: #fff;

  border-radius: 5px;

  box-shadow: 0 0 5px #1e90ff,

              0 0 25px #1e90ff,

              0 0 50px #1e90ff,

              0 0 100px #1e90ff;

}

 

 

/*animação do span para criar linhas*/

 

 

.neon-bt_f span {

  position: absolute;

  display: block;

}

 

 

/*span 1*/

.neon-bt_f span:nth-child(1) {

  top: 0;

  left: -100%;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, transparent, #1e90ff);

  animation: btn-anim1 1s linear infinite;

}

 

@keyframes btn-anim1 {

  0% {

    left: -100%;

  }

  50%,100% {

    left: 100%;

  }

}

 

/*span 2*/

.neon-bt_f span:nth-child(2) {

  top: -100%;

  right: 0;

  width: 2px;

  height: 100%;

  background: linear-gradient(180deg, transparent, #1e90ff);

  animation: btn-anim2 1s linear infinite;

  animation-delay: .25s

}

 

@keyframes btn-anim2 {

  0% {

    top: -100%;

  }

  50%,100% {

    top: 100%;

  }

}

 

 

/*span 3*/

 

.neon-bt_f span:nth-child(3) {

  bottom: 0;

  right: -100%;

  width: 100%;

  height: 2px;

  background: linear-gradient(270deg, transparent, #1e90ff);

  animation: btn-anim3 1s linear infinite;

  animation-delay: .5s

}

 

@keyframes btn-anim3 {

  0% {

    right: -100%;

  }

  50%,100% {

    right: 100%;

  }

}

 

/*span 4*/

 

.neon-bt_f span:nth-child(4) {

  bottom: -100%;

  left: 0;

  width: 2px;

  height: 100%;

  background: linear-gradient(360deg, transparent, #1e90ff);

  animation: btn-anim4 1s linear infinite;

  animation-delay: .75s

}

 

@keyframes btn-anim4 {

  0% {

    bottom: -100%;

  }

  50%,100% {

    bottom: 100%;

  }

}

 

/*Agora junte tudo e pronto você vai ter um botão com estilo neon animado para o site.

Confira a baixo o exemplo do botão pronto.
//neon-bt_f_amarelo
/*estilo do botão*/

 

.neon-bt_f_amarelo {

  position: relative;

  display: inline-block;

  padding: 10px 20px;

  color: #fd7e14;

  font-size: 16px;

  text-decoration: none;

  /*text-transform: uppercase;*/

  overflow: hidden;

  transition: 0.2s;

  /*margin-top: 40px;*/

  letter-spacing: 4px

}

 

.neon-bt_f_amarelo:hover {
  cursor: pointer !important;

  background: #fd7e14;

  color: #fff;

  border-radius: 5px;

  box-shadow: 0 0 5px #fd7e14,

              0 0 25px #fd7e14,

              0 0 50px #fd7e14,

              0 0 100px #fd7e14;

}

 

 

/*animação do span para criar linhas*/

 

 

.neon-bt_f_amarelo span {

  position: absolute;

  display: block;

}

 

 

/*span 1*/

.neon-bt_f_amarelo span:nth-child(1) {

  top: 0;

  left: -100%;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, transparent, #fd7e14);

  animation: btn-anim1 1s linear infinite;

}

 

@keyframes btn-anim1 {

  0% {

    left: -100%;

  }

  50%,100% {

    left: 100%;

  }

}

 

/*span 2*/

.neon-bt_f_amarelo span:nth-child(2) {

  top: -100%;

  right: 0;

  width: 2px;

  height: 100%;

  background: linear-gradient(180deg, transparent, #fd7e14);

  animation: btn-anim2 1s linear infinite;

  animation-delay: .25s

}

 

@keyframes btn-anim2 {

  0% {

    top: -100%;

  }

  50%,100% {

    top: 100%;

  }

}

 

 

/*span 3*/

 

.neon-bt_f_amarelo span:nth-child(3) {

  bottom: 0;

  right: -100%;

  width: 100%;

  height: 2px;

  background: linear-gradient(270deg, transparent, #fd7e14);

  animation: btn-anim3 1s linear infinite;

  animation-delay: .5s

}

 

@keyframes btn-anim3 {

  0% {

    right: -100%;

  }

  50%,100% {

    right: 100%;

  }

}

 

/*span 4*/

 

.neon-bt_f_amarelo span:nth-child(4) {

  bottom: -100%;

  left: 0;

  width: 2px;

  height: 100%;

  background: linear-gradient(360deg, transparent, #fd7e14);

  animation: btn-anim4 1s linear infinite;

  animation-delay: .75s

}

 

@keyframes btn-anim4 {

  0% {

    bottom: -100%;

  }

  50%,100% {

    bottom: 100%;

  }

}