2015/01/06近年、CSSでボタンをデザインすることが多くなりました。ボタンのデザインが出来たら、次はマウスオーバーしたときのアニメーションもつけたくなりますよね。今回はシンプルに「ボタンが沈み込む」ような動きの付け方をご紹介します。LINKボタンの沈み込みをCSSで表現するまずこちらの方法でボタンを作ります。上記記事で紹介しているソースがこちらです。8px;}基本的にこれをコピペしてもらえばおっけーなんですが、この方法だと実は沈み込まないときがあります。HTML的に前後のmarginの取り方によってmarginが相殺されて動かないんですね。このトラップに僕も何度かひっかかってまして、どこでも使えるいい方法はないかなと探して見つけたのが下記の方法です。動作に影響を与える部分だけ書きますね。上のソースからmarginとbox-shadowだけ消したものに下記のソースを加えてください。0);}box-shadowをかけておいて立体感を出しておき、マウスオーバーしたときにその効果を消します。translate3dを使ってボタン自体を下方向に移動させます。Z軸」なので、Y軸をbox-shadowと同じ大きさだけ動かせば沈み込んだように見えるというわけです。2.3以前の機種ではtransformが効かないようです。iOSは大丈夫だと高をくくってたんですけど、実際やってみたらダメでした...。今回の方法はボタンを押したときというよりもマウスオーバーしたときの挙動なので、スマホではあまり関係ありません。押した際にbox-shadowが消える動作だけは残るので、やっぱり違和感はありますよね。実装してみてこの動きが気持ち悪ければ使わない方がいいかもしれません。最後になんともベストな方法にたどり着けてないという感じです。良い方法があれば教えてください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。青春高校3年C組がついにメジャーデビュー!「君のことをまだ何にも知らない」は3Cの生徒のことを知らない人に聴いてほしい曲!音楽モーニング娘。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。