この記事では、CSSだけを使ってボタンにアニメーションをつける方法を解説していきます。 1. 浮き上がるような動き(影の変化) 「ホバー(カーソルを当てること)により浮き上がる」という単純な動きであれば、ものすごく簡単に実装できます。実際にCSSを紹介していきます。 #fab {/*円の部分*/ display: block; width: 56px;/*幅*/ height: 56px;/*高さ*/ background: #03a9f4;/*背景色*/ text-align: center;/*中央寄せ*/ border-radius: 50%;/*角丸く*/ transition: .3s;/*滑らかな動きに*/ box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);/*影*/ } #fab:hove