CSSでボタンをキラッとさせる

See the Pen shine1 by konpure (@yuntu) on CodePen.

/* ボタン */ a < display: inline-block; width: 300px; max-width: 90%; color: #fff; cursor: pointer; font-size: 20px; padding: 10px 10px; background: #cf1111; text-align: center; text-decoration: none; border-radius: 10px; position: relative; overflow: hidden; >/* ボタンをキラッとさせる */ a::before < content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%); -webkit-transition: 0.5s; transition: 0.5s; >a:hover::before

transitionの働きにより疑似要素の移動はややゆっくりとなり、白のグラデーションが左から右に移動する光景が、あたかもボタンをキラッと光った感じに見せてくれます。

マウスカーソルがボタンから離れた時にグラデーションを戻さない

先程のボタンにマウスカーソルを乗せると、左から右に白のグラデーションが流れてキラッとした感じになりますが、マウスカーソルを外すと白のグラデーションが右から左に戻ってします。

/* ボタン */ a < display: inline-block; width: 300px; max-width: 90%; color: #fff; cursor: pointer; font-size: 20px; padding: 10px 10px; background: #cf1111; text-align: center; text-decoration: none; border-radius: 10px; position: relative; overflow: hidden; >/* ボタンをキラッとさせる */ a::before < content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%); /* transitionは削除 */ >/* 以下変更部分 */ a:hover::before < -webkit-animation: shine 0.5s; animation: shine 0.5s; >@-webkit-keyframes shine < 100% < left: 100%; >> @keyframes shine < 100% < left: 100%; >>

See the Pen shine2 by konpure (@yuntu) on CodePen.

一定の間隔でキラッとさせる

今度はボタンにマウスカーソルを乗せなくても一定間隔で「キラッ」となるようにしたいとおもいます。

星の瞬きのような感じですかね

See the Pen shine3 by konpure (@yuntu) on CodePen.

/* ボタン */ a < display: inline-block; width: 300px; max-width: 90%; color: #fff; cursor: pointer; font-size: 20px; padding: 10px 10px; background: #cf1111; text-align: center; text-decoration: none; border-radius: 10px; position: relative; overflow: hidden; >/* ボタンをキラッとさせる */ a::before < content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%); /* 【変更部分】inifiniteによりずっと続ける */ -webkit-animation: shine 1s infinite; animation: shine 1s infinite; >@-webkit-keyframes shine < 100% < left: 100%; >> @keyframes shine < 100% < left: 100%; >>

先程からの変更部分はanimationプロパティにinfinite（永遠に続ける）という値を追加したことと、アニメーションの秒数を少し長め（1秒）に変更したことです。

アニメーションの間隔を変更したい場合は「animation: shine 〇s infinite;」の〇部分に自分の好きな秒数を入れると良いと思います。

まとめ

要素と同じ大きさの疑似要素を作って、その疑似要素に白のグラデーションをかけてボタンの左側から右側へ移動させる

モバイルでoverflow-xが効かない時の対策タイムラインやカレンダーの埋め込み方法簡単！クリッカブルマップの作り方マウスカーソルが乗ったらカバーをかける CSSだけで作るハンバーガメニューオリジナルのSNSシェアボタンなどを設置する object-fitで画像を指定したサイズにピッタリ合わせる

1 マウスカーソルを乗せるとキラッとするボタン
2 マウスカーソルがボタンから離れた時にグラデーションを戻さない
3 一定の間隔でキラッとさせる
4 まとめ

📎📎📎📎📎📎📎📎📎📎