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

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を消したい
(※あまりおすすめの方法ではありません。)