こんにちは、リョウヘイです。
今回は「キラっと光るボタン」の作り方。
「ボタンを目立たせたいけど、デザインはゴテゴテさせたくない…」
そんなときは、ちょっとしたエフェクトのアニメーションで解決するのも1つの手です。javascriptを使わずにcssだけで作れますよ。
CSSだけでボタンを光らせる
完成形はこんな感じ。ときどきキラっと光るので、自然に目が行きますよね。
HTML
HTMLはただのaタグなのでとてもシンプル。”button”と”shine”のclassを付けています。
1 |
<a href="#" class="button shine">光るボタン</a> |
CSS
CSSでは”button”クラスで色や角丸などボタン自体のstyleを書き、”shine”で光るエフェクトに関するstyleを書いています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/* ボタン自体のstyle */ .button{ color: #fff; background: #c9171e; font-size: 16px; border-radius: 4px; text-decoration: none; padding: 1em 3em; display: inline-block; } /* 光らせるためのstyle */ .shine{ border: 2px solid transparent; position: relative; overflow: hidden; } /* 光の疑似要素 */ .shine::before{ content: ""; animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite; background-color: #fff; width: 140%; height: 100%; transform: skewX(-45deg); top: 0; left: -160%; opacity: 0.5; position: absolute; } /* 光の動き */ @keyframes shine{ 0% { left: -160%; opacity: 0; } 70% { left: -160%; opacity: 0.5; } 71% { left: -160%; opacity: 1; } 100% { left: -20%; opacity: 0; } } |
まとめ
アニメーションの演出なら、サイト全体のイメージを損なわずにボタンを目立たせることが出来て便利です。
もし気に入って頂けたらコピペして使ってもOKなので、ぜひぜひ参考にしてみてくださいね。