今回は、cssで作るキラリと光るボタンのアニメーションをまとめた記事になっています。
タイトルでも書いた通りですが、キラッと光るボタンはLP（ランディングページ）を初め、多くのwebサイトでよく見かけますよね。
コーディングでこういった手の込んだボタンを実装する必要がある方に向けて、今回はコピペですぐに実装可能な作例をいくつか紹介していきます。
LPや有料wordpressテーマなどで使われるベタベタなボタンから、コーポレートサイトやポートフォリオでも使う機会がありそうな洗礼されたデザインのものまでを厳選してまとめましたので、きっと活躍の機会も多いと思いますよ。
もちろんコピペもOKですので、制作の際に参考にしてみてくださいね。
それでは早速下記からどうぞ！
【CSS】キラリと光るボタンアニメーション10選
存在感バツグン！一瞬キラッと光るボタン
擬似要素をanimationプロパティで動かすことによって実装できます。
数値を弄ってアニメーションの速度を調整してみてくださいね。
See the Pen Untitled by botanin (@botanin) on CodePen.
まるで映画のような閃光エフェクト（ホバー時）
思わず見惚れてしまうような美しいグローエフェクト。エフェクト専用のdiv要素にグラデーションを設定しそれぞれ動かしています。
See the Pen Shiny Button by quangdao (@lincohn) on CodePen.
より優雅に・穏やかに
動きを穏やかにすることで上品な印象になるので、存在感は出したいけど動きすぎるのもちょっと、、という場合にピッタリです。
See the Pen Attention Seeker Shiny Button by Benjamin Koehler (@codesuey) on CodePen.
ちょっとした工夫でクオリティアップ
光る要素をグラデーションにしてあげることでより自由な表現も可能になります。
See the Pen Shiny Button by Seb (@chipbarm) on CodePen.
マウスについてくる！追従型グローエフェクト（ホバー時）
マウスカーソルに連動しているので、ついつい動かしたくなっちゃいますね笑
jsを使うのが難点ですが、ここまで遊び心のある表現もできちゃいますよ。
See the Pen Shiny Hover Radial Gradient Button by Simon Hopstätter (@Shackles) on CodePen.
ぐるっと境界線が光る（ホバー時）
stroke-dashoffsetプロパティを使うことで比較的簡単にグローエフェクトを実装することができます。
See the Pen Shiny button – SVG animation by Sabine Robart (@_Sabine) on CodePen.
ポスターが動きながら光る
ここまで複雑な挙動でもcssのみで実現できるとは驚きですね。
See the Pen Apple TV Macbeth Poster Animation by Nikolay Talanov (@suez) on CodePen.
ホバーで光るボタン詰め合わせ
光るボタン以外にも様々なホバーエフェクトが用意されています。
あなたはどれが気に入りましたか？
See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen.
バチバチと輝くダイヤモンド
cssのみでこのアニメーションはもはや人知を超えています笑
色々なシートで輝きそうですね！ダイヤモンドだけに。
See the Pen Shiny Diamond 💎 by Luciano Felix (@FelixLuciano) on CodePen.
回転しながら神秘的にきらめくダイヤモンド
scale3d、perspectiveなどを使うことで奥行きのある動きを実現しています。
See the Pen DIAMOND by Xpressive Team (@Xpressive_Team) on CodePen.
まとめ
いかがでしたか？
今回は、cssで作るキラリと光るボタンのアニメーションをまとめてみました。
一昔前に比べるとcssでも多様な表現ができるようになっています。
もちろん、あまりにも頻繁に要素を動かしすぎるのはユーザーにとって好ましくはありませんが、ポイントで使うことで豊かなユーザー体験を提供できるようになりますよね。
ぜひ日々のweb制作に取り入れてみてくださいね。
それではまた。
webデザインの勉強で悩んでいませんか？
photoshopを始めとしたwebデザインの勉強、詰まっていませんか？
もし独学で苦戦しているなら、webデザインスクールで体系的に学習した方が挫折しなくて済むかもしれません。
筆者もwebデザインスクールに通ってwebデザイナーになり、今は割と稼げるようになったので、当時のスクールにはとても感謝しています。
今は割とキャンペーンをやっているwebデザインスクールも多いので、あなたに合うスクールが見つかるかもしれません。
興味がある方は以下からどうぞ。
＞＞ガチでおすすめのwebデザインスクールランキング【厳選10校】
