ボタン・広告

キラッと光るボタン

キラッと光るボタンのCSS

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

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

CSSの解説

以下、ボタンを光らせる際に必要な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.