【CSS】簡単なアニメーションでボタンを作ってみよう
2022-10-13
どうも、氷翠です。
今回は以前に使用していた「transition-duration」を利用して、簡単なボタンを作ってみようと思います。
で、タグとしては「button」タグと「a」タグ両方を使って作っていきます。特に微調整はしていないので、この二つのタグのデザイン的な意味で違いが出てきています。
アニメーションとしては疑似セレクタと呼ばれるものを利用しています。
今回使っている疑似セレクタは「:focus」要素が選択された状態になった時、「:hover」マウスポインタがその要素の上に来た時、「:active」今回のボタンタグやaタグの場合では、ボタンが押された時という3つの変化。といっても、「:focus」と「:hover」については同じ設定をしているので、分かりにくいかもしれません。
また、画面を分割するのに、「display: flex」を利用しています。
コメントを残す