キラッと光るボタンを作ろう【3ステップ】

CSSでボタンアニメーションを作りたいけれど、「光る動きは難しそう」と感じていませんか？
実は、キラッと光るボタンはシンプルな仕組みで実装できます。
この問題では、光るボタンの基本を理解しながら、見た目とクリック率を高めるアニメーションの作り方を学びましょう。

CSSアニメーションの問題に挑戦しよう！

問題

「キラッと光るボタンを作ろう【3ステップ】」

CSSで光るボタンアニメーションを作成し、クリックしたくなる動きを実装してみましょう。
シンプルな構造で、キラッと光る仕組みと動きの基本を理解できる問題です。

あらかじめエディタに書くコード

                    <div class="btn">ここをクリック</div>
¥HTML¥

                    .btn{
  position: relative;
  padding: 10px 0;
  background-color: #dddddd;
  text-align: center;
  color: black;
  width: 200px;
  cursor: pointer;
  box-shadow: 0 5px #bbbbbb;
  transition: .5s;
  }
.btn:active{
  transform: translateY(5px);
  box-shadow: 0 0 #bbbbbb;
}
.btn::before{
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
}
¥CSS¥

期待する画面

解答と解説（キラッと光るボタンを作ろう【3ステップ】）

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

この問題では、CSSのボタンアニメーションを使って「キラッと光る」動きを実装しています。
ポイントは、疑似要素で作った光を動かし、ボタンの上を横切らせることで光って見せる点です。

実装の流れは、大きく3ステップに分けられます。

まず1つ目は、光の元となる要素を用意することです。
擬似要素（::before）を使い、ボタンの外側に光のパーツを配置します。
この時点ではまだ見えない状態になっています。

2つ目は、その光に動きをつけることです。
アニメーションを設定し、左から右へ移動させることで、光が流れているような動きを表現します。
また、transformやopacityを組み合わせることで、光が徐々に現れて消える自然な変化を作ることができます。

3つ目は、ボタンの外にはみ出した部分を隠すことです。
overflow: hidden;を指定することで、ボタン内部だけで光が動いているように見せることができます。

このように、「光を作る」「動かす」「はみ出しを隠す」の3ステップを意識することで、CSSだけでも視線を引きつける光るボタンアニメーションを実装できます。
仕組みを理解すれば、色やスピードを調整してさまざまなデザインに応用できます。

補足

キラッと光る動きは、疑似要素・animation・overflow:hiddenの3つを組み合わせることで実現できます。
色やスピードを調整するだけでさまざまなデザインに応用できるため、ぜひ自分でもアレンジしてみましょう。

ボタン系の関連問題もあわせて挑戦してみましょう。
・ボタンCSS 初級：クリックで押したように見えるボタンの作り方
・ボタンCSS 中級：おしゃれなボタンアニメーションを作ろう
・問題集一覧：CSSアニメーション問題集トップ
・CSSの基礎から学びたい方：CSS入門講座

さらに体系的に学びたい方は、講座やメンター相談も活用できます。
気になる方は、下のポイントもチェックしてみてください。