【CSS】簡単なアニメーションでボタンを作ってみよう

2022-10-13

どうも、氷翠です。

今回は以前に使用していた「transition-duration」を利用して、簡単なボタンを作ってみようと思います。

で、タグとしては「button」タグと「a」タグ両方を使って作っていきます。特に微調整はしていないので、この二つのタグのデザイン的な意味で違いが出てきています。

アニメーションとしては疑似セレクタと呼ばれるものを利用しています。

今回使っている疑似セレクタは「:focus」要素が選択された状態になった時、「:hover」マウスポインタがその要素の上に来た時、「:active」今回のボタンタグやaタグの場合では、ボタンが押された時という３つの変化。といっても、「:focus」と「:hover」については同じ設定をしているので、分かりにくいかもしれません。

また、画面を分割するのに、「display: flex」を利用しています。