クールなネオンライト効果を実現する純粋な CSS (デモ付き)

 <div class="light">
    ネオンボタン
 </div>

体 {
 背景: #050901;   
}
。ライト {
  幅: コンテンツに合わせる;
  パディング: 25px 30px;
  色: #03e9f4;
  フォントサイズ: 24px;
  テキスト変換:大文字;
  遷移: 0.5秒;
  文字間隔: 4px;
  カーソル: ポインタ;
}
.light:hover {
  背景色: #03e9f4;
  色: #050801;
  ボックスシャドウ: 0 0 5px #03e9f4,
              0 0 25ピクセル #03e9f4,
              0 0 50ピクセル #03e9f4,
              0 0 200px #03e9f4;
}

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    ネオンボタン
</div>

。ライト {
  位置: 相対的;
  パディング: 25px 30px;
  色: #03e9f4;
  フォントサイズ: 24px;
  テキスト変換:大文字;
  遷移: 0.5秒;
  文字間隔: 4px;
  カーソル: ポインタ;
  オーバーフロー: 非表示;
}
.light:hover {
  背景色: #03e9f4;
  色: #050801;
  ボックスシャドウ: 0 0 5px #03e9f4,
              0 0 25ピクセル #03e9f4,
              0 0 50ピクセル #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  位置: 絶対;
}
.light div:n番目の子(1){
  幅: 100%;
  高さ: 2px;
  上: 0;
  左: -100%;
  背景: 線形グラデーション(右へ、透明、#03e9f4);
  アニメーション: animate1 1s 線形無限;
}
.light div:n番目の子(2){
  幅: 2px;
  高さ: 100%;
  上: -100%;
  右: 0;
  背景: 線形グラデーション(下へ、透明、#03e9f4);
  アニメーション: animate2 1s 線形無限;
  アニメーション遅延: 0.25秒;
}
.light div:n番目の子(3){
  幅: 100%;
  高さ: 2px;
  下部: 0;
  右: -100%;
  背景: 線形グラデーション(左へ、透明、#03e9f4);
  アニメーション: animate3 1s 線形無限;
  アニメーション遅延: 0.5秒;
}
.light div:n番目の子(4){
  幅: 2px;
  高さ: 100%;
  下部: -100%;
  左: 0;
  背景: 線形グラデーション(上へ、透明、#03e9f4);
  アニメーション: animate4 1s 線形無限;
  アニメーション遅延: 0.75秒;
}
@keyframes アニメーション1 {
  0% {
    左: -100%;
  }
  50%,100% {
    左: 100%;
  }
}
@keyframes アニメーション2 {
  0% {
    上: -100%;
  }
  50%,100% {
    上: 100%;
  }
}
@keyframes アニメーション3 {
  0% {
    右: -100%;
  }
  50%,100% {
    右: 100%;
  }
}
@keyframes アニメーション4 {
  0% {
    下部: -100%;
  }
  50%,100% {
    下部: 100%;
  }
}