CSSでマウスオーバー時に拡大するボタンを作る

こんなアクションをするボタンの作り方です。

CSS設定

まずはCSSの設定を見ていきましょう。

ボタンがhoverされた時に拡大させるという設定をしています。
それが以下の設定になります。

ボタンのアクションのCSS

.button_class:hover {
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.15,1.15);
	-o-transform: scale(1.15,1.15);
	-ms-transform: scale(1.15,1.15);
	transform: scale(1.15,1.15);
}

拡大するときのアニメ―ションのスピードをボタン本体のスタイルで指定しています。
例えば、ボタンを2倍の大きさにする場合、どれくらいのスピードで2倍まで拡大するのかという設定ですね。
この設定をしないと、一瞬でボタンが2倍になってしまうので違和感があります。

ボタンそのもののCSS

.button_class {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

スマホの時だとボタンを押した後、ずっとそのままになってしまいますので、hoverアクション時ではなく、activeアクション時にスタイルを適用するようにしましょう。

スマホの場合の例

.button_class:active {
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.15,1.15);
	-o-transform: scale(1.15,1.15);
	-ms-transform: scale(1.15,1.15);
	transform: scale(1.15,1.15);
}

また、hoverのアクションを外す指定をするのも忘れずに。
本サイトでは以下のように制御を行っています。
レスポンシブデザインでスマートフォンのhoverを消したい
(※あまりおすすめの方法ではありません。)