CSSアニメーション:マウスオンで色がスライドして変わるボタンの作り方

こんにちは、リョウヘイです。

今回紹介するのは、マウスを乗せるとスライドして色が変わるボタンの作り方です。javascriptなどは使わず、CSSアニメーションだけで作っていきます。気に入ったものがあれば、ぜひコピペして使ってみてくださいね。

完成サンプルはこちら

まずは以下のページから実際に動きをご覧ください。各ボタンにマウスを乗せると、いろんな方向からスライドするように色が変わります。

スライドエフェクトつきボタン

HTML

HTMLはすべて共通です。以下のように「button」というclassをあてただけのリンクタグになっています。

それでは、各ボタンのCSSを紹介していきます。

CSS_01:左から右へスライド

左から右へスライドするボタンのCSSは以下になります。

CSS_02:右から左へスライド

右から左へスライドするボタンのCSSは以下になります。

CSS_03:上から下へスライド

左から右へスライドするボタンのCSSは以下になります。

CSS_04:下から上へスライド

下から上へスライドするボタンのCSSは以下になります。

CSS_05:左から右へスライドし、右に消える

マウスをのせて左から右へスライドするまでは01と同じですが、マウスを外したときにそのまま右に消えていきます。

CSS_06:右から左へスライドし、左に消える

マウスをのせて右から左へスライドするまでは02と同じですが、マウスを外したときにそのまま左に消えていきます。

CSS_07:上から下へスライドし、下に消える

マウスをのせて上から下へスライドするまでは03と同じですが、マウスを外したときにそのまま下に消えていきます。

CSS_08:下から上へスライドし、上に消える

マウスをのせて下から上へスライドするまでは04と同じですが、マウスを外したときにそのまま上に消えていきます。

CSS_09:真ん中から左右へスライド

真ん中から左右に開くようにスライドするボタンのCSSは以下になります。

CSS_10:真ん中から上下へスライド

真ん中から上下に開くようにスライドするボタンのCSSは以下になります。

まとめ

というわけで、今回はスライドして色が変わるボタンの作り方でした。シンプルで使いやすいエフェクトなので、もし気に入っていただけたら是非使ってみてくださいね。