CSSでボタンの簡単なアニメーションを実装する方法【3パターン紹介】

こんにちは、Autumn(オータム)です。

「WEBページを制作中だけど、ボタンにアニメーションをつける方法がわからない。。」「Javascriptは難しくてまだ勉強してないからアニメーションがつけられない。。」

そんな方向けに、CSSでも実装できるカンタンなアニメーションの導入方法をお伝えします。

実例＋ソースコード公開するので、そのままコピペして使うこともできます。

内容をちゃんと理解したい！という方はソースコードを見ながら、自分のテキストエディタで書いてみることをオススメします。

自分の手を動かして書くことは、プログラミング上達の近道ですのでぜひ。写経のやり方に関しては別記事にもまとめていますので参考にしてみてください。
「プログラミングの写経」って勉強法としてアリ？【結論：初心者には有効です】

それでは、早速勉強していきましょう！

Contents

CSSでボタンの簡単なアニメーションを実装する方法

今回は、ボタンにホバーした時のアニメーションでよく使われるパターンを3つご紹介します。
この3つを覚えておけば、大体のボタンのアニメーションはカバーできると思います。
その３パターンは以下の通りです。

・少しフェードをかける
・色を変える
・矢印を動かす

一番シンプルなタイプで、ボタンにカーソルを合わせると全体が少しフェードするようになります。

まずはボタンを用意します。
ソースコードとブラウザ上の状態はこちら。

基本中の基本ですが、aタグに「display: inline-block;」をかけて大きさを指定しています。
「インラインブロック要素って何？」という方はこちらをどうぞ。
【HTML・CSS勉強】ブロック要素とインライン要素の違いまとめ

では、ここからどうするかというとCSSのホバーエフェクトを使用します。
以下のコードを追加するだけです。

「opacity」は要素の不透明度を指定するプロパティで、今回は不透明度70%で設定しました。
実際に導入すると下記のように、フェードがかかるようになります。

続いてこちらも定番、ホバーするとボタンの色が変わるアニメーションです。
これも、CSSのホバーアクションを利用します。

実例とソースコードはこちら。

ホバーすると、中の色がオレンジになり、文字の色が白に変わりました。

先ほどの例にもありましたが、「transition」プロパティを使用することで、アニメーションの完了するスピードを調整することができます。
下の例は「transition: 2s;」に変えたパターン。2秒かけて変化するのがわかるかと思います。

ホバーエフェクトで擬似要素にアニメーションをかけることもできます。
以下のように、擬似要素で導入した矢印をホバーエフェクトで動かしてみます。

「positon: absolute;」を利用して、ホバーした時に位置が変わるよう設定しています。
これもよくWEB制作で多用されるので覚えておいて損はないです。

アニメーションを効果的に使用することで、ユーザーのアクションを誘引することができますので、ポイントで使っていきましょう。

1回ではなかなか覚えられないのが人間です。継続して勉強していくことが大事。
何度も反復して記憶に刷り込みましょう！

また、勉強のためにいろんなホームページを自分で観察してみるのも非常に効果的です。「こんなアニメーション使ってみたい！」というものに出会えたら、スキルアップのチャンスです。

今回はCSSのみで実装しましたが、Javascriptを活用すればより幅が広がります。CSSより難易度は上がりますが、WEB制作を仕事にするなら必須のプログラミング言語ですので、チャレンジしてみましょう。

読んでいただき、ありがとうございました！