キラッと光るボタンのCSS

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

自動でキラッと光るボタン。
当サイトでも使用しているテーマAFFINGER6のボタンと、似たような仕組みになっています（たぶん）。

CSSの解説

コードを見る

HTML

<div class="button btn-shine">
  <a href="#">Shine Button</a>
</div>

CSS

通常のボタン用装飾 (.button) と、ボタンを光らせる装飾 (.btn-shine) をクラス別に分けています。

既にボタンの装飾がされている場合は、15行目から下だけをコピーして使用してください。

/****** ボタン用装飾 ******/
.button{
  text-align: center;
  margin: 1rem;
}
/* リンク部分 */
.button a{
  display: inline-block;
  padding: 0.75em 4em;
  background: #2e8b57; /*ボタン色*/
  color: #fff;
  text-decoration: none; /*下線削除*/
}

/****** ボタンをキラッとさせる ******/
.btn-shine a{
  position: relative; /*疑似要素の起点*/
  overflow: hidden; /*範囲外の光を隠す*/
}
/* 光 */
.btn-shine a:after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 10%;
  height: 150%;
  background: #fff; /*光の色*/
  transform: rotate(45deg); /*45度傾ける*/
  animation: reflect 5s ease-in-out infinite;
/*animation: アニメ名｜光る周期｜動き方｜ループ*/
}

/*** 光のアニメーション ***/
@keyframes reflect{
  0%,75%{
    transform: rotate(45deg) scale(0);
    opacity: 1;
  }
  100%{
    transform: rotate(45deg) scale(100); /*大きく*/
    opacity: 0;
  }
}

以下、ボタンを光らせる際に必要なCSSの解説です。（ボタン作成のための装飾については省いています）

ボタンに光らせるためのクラス (.btn-shine) を付与
ボタン（リンク部分）に準備をする .btn-shine a
- 疑似要素を使用するためにposition: relativeを指定しておく
- 光がボタンからはみ出さないようにoverflow: hiddenを付与
疑似要素を使用して光を作成する (.btn-shine a:after)
- position: absoluteを使ってボタンより外に配置
- height: 150%でボタン（親要素）の高さより大きく
- background: fffで白い光に
- transform: rotate(45deg)で45度斜めにする
- animationを指定する（加速してから減速する ease-in-out とループ用の inifiniteが必須）
光を動かすためのアニメーションを @keyframes で作成 (reflect)
- 常に45度の傾きを維持transform: rotate(45deg)
- 時間調整のため75%までは非表示 transform: scale(0)とopacity: 0
- 100%時点でtransform: scale(100)を指定してめいっぱい大きく
  （はみ出た分は親要素のoverflow: hiddenで消えるので安心）

応用CSS

ホバー時にキラッと光るボタン

マウスホバーした時に1回だけ光るボタンです。
疑似要素の表示をホバー時だけに制限し、アニメーションを1回きりの短いものに変更しています。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.