クリック・ホバーで縮小拡大するリンクボタンをCSSだけで作る方法

要素を大きくしたり色を徐々に変えたりするなどのアニメーションをする場合はjQueryを使ってスクリプトから要素を操作する以外にCSSだけでアニメーションさせることも可能です。

どうやるかというとCSS3から追加されたanimationプロパティを使います。このプロパティを使うと要素がクリックされたり、ホバーされたりした場合にアニメーション効果をつけることができます。

animationプロパティを使えばただのリンクボタンではなく、クリックやホバーでアニメーションしながら拡大縮小する読者の目を引くようなボタンが作れます。その作り方をここでは解説します。

必要なCSS知識

アニメーションプロパティについて

アニメーションを設定するには@keyframesという@規則で定義されたアニメーション名をanimation-nameプロパティに、アニメーションする時間(秒)をanimation-durationプロパティに渡します。

button
{
  animation-name: button_anime;
  animation-duration: 3s;
}

@keyframes button_anime { from { background-color: rgba(0, 255, 0, 0.7); } to { background-color: rgba(0, 0, 255, 0.7); } }

@keyframesではfromに開始時のスタイル、toブロックの中に終了時のスタイルを記述します。fromは0%、toは100%に置き換えることも可能です。

上のCSSをボタンなどに適用すると次のようにボタンの背景色が変化します。以下の例ではリピート設定が有効になっていますが、何も設定しない場合は一回しかアニメーションは起こりません。

See the Pen NyQMEE by kaz1503 (@kaz1503) on CodePen.dark

transfromプロパティ

animationプロパティ単独でも大きさや色などのアニメーションは可能ですが、transformプロパティを使うと要素を移動・拡大縮小・回転・傾斜して変形させることができます。

transformプロパティには次の４つの変形関数が渡せます。

• translate(移動関数)
• scale(拡大縮小関数)
• rotate(回転関数)
• skew(傾斜関数)

関数を渡す場合は次のようにtransformプロパティに各関数をスペースで区切って記述します。

transform: translateX(10px) translateY(20px) rotate(20deg);

上の例ではこのtransformプロパティが適用された要素に対してX方向に10px、Y方向に20px、20度回転するという変形が加えられます。

これをアニメーションを定義する@keyframesのfromブロックとtoブロックの中で使えば要素を変形させることが可能です。

アニメーションするリンクボタンの作り方

今まで紹介したアニメーションプロパティとtransformプロパティを利用すればホバー時やクリック時にアニメーションしながら拡大縮小するボタンが作れます。

まず次のようなリンクを作ります。(buttonタグでも可)

<a href="" class="btn">ボタン</a>

次のCSSを適用すると形状がボタンのリンクが作れます。

.btn
{
  background-color: #F33;
  border: none;
  border-radius: 6px;
  padding: 12px 40px;
  display: inline-block;
}

このリンクボタンがマウスなどのホバー時に縮小するアニメーションを適用するのが次のCSSです。

.btn:hover
{
  animation: big 0.1s;
  animation-fill-mode: forwards;
}

@keyframes big 
{
  0% {transform: scale(1); }
  100% {transform: scale(1.1);}
}

:hoverは要素にマウスなどがホバーしたときに適用される疑似クラスです。その疑似クラスに要素が元のサイズから1.1倍になるようにtransformプロパティでscale関数を使って設定しています。

またanimation-fill-modeプロパティにforwardsを渡すことでホバーしている間はアニメーション後の状態を保つようにしています。

次にクリックされたときのアニメーションは次のように定義します。

.btn:active
{
  animation: small 0.1s;
  animation-fill-mode: forwards;
}

@keyframes small 
{
  100% {transform: scale(0.9);}
}

:activeはクリック時やタッチ時などに要素に適用される疑似クラスです。ここではホバーの時とは逆に要素を0.9倍に縮小しています。

ブラウザではこのボタンは次のように動作します。実際にボタンをクリックなどして動作を確かめてみてください。

See the Pen ホバーやクリックするとアニメーションするボタン by kaz1503 (@kaz1503) on CodePen.dark

ここではボタンを拡大縮小していますが、transformプロパティに渡す関数を変えれば面白いアニメーションをするボタンも作れると思います。

以上ボタンのクリック時などにアニメーションを適用する方法を解説しました。読者の興味を引くようなボタンを作ってみてください。