CSSだけで実装できるボタンアニメーション(マテリアルデザイン用)

マテリアルデザインのボタンアニメーション

フローティング操作ボタン

マテリアルデザインといえば円形の浮き上がったようなボタンですよね。これは、フローティング操作ボタンと呼ばれ、様々なアニメーションをつけることもガイドラインで推奨されています。使い方のルールと基本的なボタンの作り方はこちらの記事で解説しています。

この記事では、CSSだけを使ってボタンにアニメーションをつける方法を解説していきます。

1. 浮き上がるような動き(影の変化)

浮き上がるような動き

「ホバー(カーソルを当てること)により浮き上がる」という単純な動きであれば、ものすごく簡単に実装できます。実際にCSSを紹介していきます。

HTML
<a id="fab" href="#">
	<i class="fa fa-share"></i>
</a>
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:hover {/*ホバー時の影*/
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}

#fab i {/*中央のアイコン*/
	color: white;
	line-height: 56px;/*=幅と高さ*/
	vertical-align: middle;
	font-size: 18px;/*サイズ*/
}

↑ポイントはbox-shadowです。ホバー時には影を大きくすることで、浮かびあがったかのように見せることができます。transition: .3sは影の変化を滑らかにするためのものです。よりゆっくり動かしたいときは .3s .5sなどに変えると良いでしょう。

2. ホバーによりアイコンを回転

ホバーによりアイコンが回転

ホバーによりアイコンが回転するような動きも、分かりやすくて印象に残るのではないかと思います。この例ではFontAwesomeのアイコンフォントを使っています。

アイコンはiタグにより表示されるので、iタグをホバーにより回転させるようにしてみます。

HTML
<a id="fab" href="#">
	<i class="fa fa-star"></i>
</a>
CSS
#fab {/*円*/
    display: block;
    width: 56px;
    height: 56px;
    background: #03a9f4;
    text-align: center;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
}

#fab:hover {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);}


#fab i {/*アイコン*/
	color: white;
	line-height: 56px;
	vertical-align: middle;
	font-size: 18px;
	transition: 0.2s;
}

#fab:hover i {/*ホバーでアイコン回転*/
	-webkit-transform: rotate(120deg);
	transform: rotate(120deg);
}

transform: rotate(120deg)でアイコンが回る角度を指定しています。-webkit-transformは、古いChromeやSafariに対応させるためのものです。アイコン種類によって角度を調節すると良いでしょう。120degの数字が「回転する角度」の指定になるので、好きな値に調整すると良いでしょう。

3. 回転してアイコン種類が変わる

回転によりアイコン種類が変わる

回転と同時にアイコンの種類を変えても面白いのではないかと思います。以下で紹介する例では、同時にアイコンや円の背景色を変えています。

HTML
<a id="fab" href="#">
	<i class="fa fa-lock"></i>
</a>
CSS
#fab {
    display: block;
    width: 56px;
    height: 56px;
    background: #536dfe;
    text-align: center;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
}

#fab i {
	color: white;
	line-height: 56px;
	vertical-align: middle;
	font-size: 18px;
	transition: .2s;
}
#fab:hover {
	background:#3f51b5;/*背景色を変更*/
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);/*浮き上がる*/}

#fab:hover i {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);/*回転角度*/
}

#fab:hover .fa:before {
	content: '\f13e';/*変更後のアイコン*/
}

・ アイコン種類の変更#fab:hover .fa:before {content:'\f13e'}で切り替わるアイコン種類を指定します。\f13eはアイコンのユニコードを表します。これはFontAwesomeの各アイコンのページで確認できます。くわしくはFontAwesomeをCSSで使う方法で説明しています。

・回転角度この例では回転角度を「360°」、つまり一回転するようにしてみました。transition: .2sの数字を変えれば、回転速度を早くしたり遅くしたりすることができます。

・背景色の変化#fab:hover {backgrond}で背景色も変えています。遷移する色は同系色で濃淡だけ変えるのがおすすめです。

最後に

マテリアルデザインはユーザビリティ重視のため、華やかなで斬新な表現ができる部分はそう多くありません。ボタンのアニメーションだけでも美しく目を引くものにすれば、マテリアルデザインのレベルが一段階上がるはずです。なお、マテリアルデザインの作り方ついては以下の記事で総まとめしています。ぜひ目を通してみてください。

マテリアルデザインの作り方講座に戻る

同じカテゴリーの記事
同じカテゴリーの記事一覧
マテリアルデザイン入門
サルワカ