CSS Transitionsでかっこいいボタン編

今回は、CSS Transitionsを使ったかっこいいマウスーバーエフェクトを勉強します。

CSS Transitionsを使ったボタンのマウスオーバーエフェクト

まずは実現させるアニメーションについて考えます。今回は、背景カラーが上下に分かれていくボタンとします。

背景が上下に分かれていくためには、背景を2つに分けて1つのボタンのように上下に並べて配置します。そうしたうえで、マウスオーバーしたときに2つの背景の上側がボタンの上辺に向かって高さが0に、背景の下側がボタンの下辺に向かって高さが0になるだろうと想像がつきます。

マウスオーバーのイベントを受け取るのはボタン全体でないとダメなので、ボタンの領域はアニメーションする上下に並べた領域の上にないといけません。そのため、z-indexを指定してオーバーレイ表示させます。

まず、アニメーションの始点となるボタン領域+上下する領域を配置します。

基本のスタイル定義は以下。何度も同じボタンを描いて説明するため、ボタンの共通部分はbuttonクラス、後々アニメーションするクラスはnoramlクラスに分けています。別に分けなくてはいけないことはないです。

まだ普通のボタン

次に、アニメーションの終点を記述します。マウスオーバーしたときに、上下する領域の高さは0になり、ボタン部分は背景色とテキストの色が変わります。

hoverボタン

アニメーションを定義します。transition-propertyプロパティに”all”を指定すると、トランジション対象のプロパティ全てに同じ定義が適用されます。

animationボタン

これでCSS Transitionsを使った背景が上下に分かれるボタンができました。

広告
  • LINEで送る