【初心者でもわかる】CSSで発光させて、光るボタンや文字を作る

どうも7noteです！光る文字やボタンの作り方

アニメーションをつけていろいろな要素をピカピカ光らせたい方へ。
文字やボタンをピカピカ光らせる方法を紹介。

ピカピカ光る文字の作り方

※過去の記事で作ったネオン文字を加工利用しています。
過去記事→ネオン風の文字を作る方法（無料フォントサイトも紹介）

index.html

<div class="neon">NEON</div>

style.css

body {
  background: #000; /* 背景色を黒に指定 */
}
	
.neon {
  color: #FFF;       /* 文字色を白に変更 */
  font-size: 50px;   /* 文字サイズを50pxに指定 */
  font-family: Beon; /* ネオン風のフォントを指定(ダウンロードしたもの) */
  animation: flash 1s infinite; /* アニメーションflashを1秒ごとに繰り返す */
}
	
@keyframes flash {
  0%, 100% {
    /* 明るく光るよう影を重ねる */
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  50% {
    /* 淡く光るよう影を重ねる */
    text-shadow: 0 0 10px #fff, 0 0 20px #fcfcfc, 0 0 30px #fcfcfc, 0 0 40px #fc00de;
  }
}

ピカピカ光るボタンの作り方

index.html

<label><input type="button">push!</label>

style.css

input {
  display: none; /* デフォルトのボタンを非表示にする */
}
	
label {
  color: #fff;        /* 文字色を白に指定 */
  font-size: 30px;    /* 文字サイズを30pxに指定 */
  background: #f90;   /* 背景色をオレンジに指定 */
  padding: 10px 20px; /* 余白を指定 */
  animation: flash 1s infinite; /* アニメーションflashを1秒ごとに繰り返す */
}
	
@keyframes flash {
  0%, 100% {
    /* 明るく光るよう影を重ねる */
    box-shadow: 0 0 10px #ffc, 0 0 20px #ffc, 0 0 30px #ff9, 0 0 40px #ff6, 0 0 70px #fc6, 0 0 80px #f99, 0 0 100px #ff96, 0 0 150px #ff96;
  }
  50% {
    /* 淡く光るよう影を重ねる */
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffc, 0 0 40px #ff9;
  }
}

まとめ

・文字をピカピカ光らせるなら→text-shadow
・それ以外の要素をピカピカ光らせるなら→box-shadow

間違えないように気をつけてください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ