パーツ番号 04-01-12 ・ CSSのみ

ネオングロー枠ボタン

ホバーすると枠線が発光しながら背景色が満ちるネオン風ボタン。WordPressのイベント・エンタメ系サイトのダークテーマに映えるCTAです。

hovercssdark

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-12-btn" onclick="return false;">今すぐ参加する</a>

CSS

.prev.d04-01-12{ background:#0a0a12; }
        .d04-01-12-btn{
          display:inline-block;
          padding:15px 42px;
          color:#8ef8ff;
          background:transparent;
          border:2px solid #22d3ee;
          border-radius:8px;
          font-size:14px;
          font-weight:700;
          letter-spacing:.1em;
          text-decoration:none;
          transition:box-shadow .35s ease,color .35s ease,background .35s ease;
        }
        .d04-01-12-btn:hover{
          color:#0a0a12;
          background:#22d3ee;
          box-shadow:0 0 12px #22d3ee,0 0 32px rgba(34,211,238,.7),0 0 60px rgba(34,211,238,.4);
        }

クラス名 .d04-01-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。