Webサイトでよく見かける「光るボタン」。
JavaScriptを使わなくても、CSSだけでシンプルに実装できます。
今回は初心者向けに、
を含めながら、実際に使えるボタンを作っていきます。
完成サンプル
まずは基本となる光るボタンを作成します。
CodePenなどに貼り付けると、そのまま動作確認できます。
See the Pen glow-button by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
HTML
<a href="#" class="glow-button">Button</a>CSS
body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:#111;
font-family:sans-serif;
}
/* ボタン本体 */
.glow-button{
position:relative;
display:inline-block;
padding:15px 40px;
color:#fff;
text-decoration:none;
font-size:18px;
letter-spacing:2px;
border:2px solid #00ffff;
border-radius:50px;
overflow:hidden;
transition:0.3s;
/* 光 */
box-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff;
}
/* ホバー時 */
.glow-button:hover{
background:#00ffff;
color:#111;
box-shadow:
0 0 20px #00ffff,
0 0 40px #00ffff,
0 0 80px #00ffff;
}解説
今回のポイントは box-shadow です。
box-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff;複数重ねることで、ネオンのような光を表現しています。
ホバー時のアニメーション
transition:0.3s;を設定することで、
がなめらかに変化します。
色を変更してみる
例えばピンク色に変更したい場合は、
#00ffffを、
#ff00ffへ変更するだけです。
光を強くする方法
より強く発光させたい場合は、
box-shadow:
0 0 20px #00ffff,
0 0 40px #00ffff,
0 0 80px #00ffff;の数値を大きくします。
さらにカスタマイズしてみる
ここまではシンプルな光るボタンを作成しました。
さらにCSSを追加することで、ホバー時に「キラッ」と光が流れる演出も追加できます。
追加するコード
下記コードを追加してください。
/* キラッと流れる光 */
.glow-button::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.8),
transparent
);
transform:skewX(-25deg);
}
/* ホバー時 */
.glow-button:hover::before{
animation:shine 0.8s ease;
}
/* アニメーション */
@keyframes shine{
100%{
left:150%;
}
}どこに追加する？
今回のコードは、現在のCSSコードの一番下へ追加すればOKです。
.glow-button:hover{
background:#00ffff;
color:#111;
box-shadow:
0 0 20px #00ffff,
0 0 40px #00ffff,
0 0 80px #00ffff;
}
/* ← この下へ追加 */という形になります。
どう変わる？
このコードを追加すると、ホバー時に光が横へ流れるようになります。
シンプルなネオンボタンより、より近未来風の演出になります。
サンプル
See the Pen glow-button-Pink by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
overflow:hidden; とは？
overflow:hidden;を設定することで、光がボタンの外にはみ出さないようにしています。
これが無いと、光のラインがボタン外まで見えてしまいます。
キラッをゆっくりにする
光の流れる速度は、
animation:shine 0.8s ease;の 0.8s を変更することで調整できます。
例えば：
animation:shine 1.5s ease;にすると、ゆっくり光が流れます。
まとめ
今回はCSSだけで作れる光るボタンを紹介しました。
今回のポイントは、
という点です。
色や光の強さを変えるだけでも印象がかなり変わるので、ぜひカスタマイズしてみてください。
