Sorairo

マウスオーバー時に沈みこむ挙動のボタンをCSSで作成する方法

WordPressのテーマ作成時に参考にしたサイトを実例と共に紹介していきたいと思います。
今日は、CSSだけでマウスオーバー時に沈むような動きをするボタンをご紹介します。

advertisement

完成形

まずは完成形から。
当ブログでは個別記事ページに設置しているSNSシェア用のボタンとカエレバのリンク用ボタンに利用しています。

SNSシェア用ボタン

カエレバリンク用ボタン

HTML

上記の完成形は複数のボタンを横並びにしていますので、まずはボタン1個のHTMLで解説します。
HTMLは以下のように記述します。

シンプルですね。
クラス名をbuttonとしたdivでリンクタグのaを囲みます。
ただ、あくまでも一例なのでお好みでどうぞ。

CSS

続いてはCSSですが、まずはボタンのような見た目にします。

ここまでで以下のような見た目になります。

See the Pen CSS Button by ryskyshd (@ryskyshd) on CodePen.

ポイントとしては、border-radius: 3px;でボタンの角に丸みを付けて、box-shadow: 0 3px 0 #0a71b0;でボタンに影を付けることで立体的に見えるようにしている点です。
ちなみに、transition: .2s;と指定することで、マウスオーバー時の変化の速度を調整できます。

そして、続いてはマウスオーバー時のCSSとして以下のように指定します。

これで以下のようにマウスオーバー時に沈むような挙動になります。
実際に挙動を確認してみてください。

See the Pen CSS Button hover by ryskyshd (@ryskyshd) on CodePen.

box-shadow: none;とすることで影が消え、transform: translate3d(0, 3px, 0);として、消えた影の3px分をtransformで移動させることで沈むような挙動を実現しています。

最後に

いかがでしたでしょうか。
仕組みが分かると簡単ですが、これを何もないところから生み出すのは至難の業ですよね。
今回参考にしたのは以下の記事です。

参考にしたというか、まんまですね(笑)

advertisement

related posts

当ブログをご紹介いただきました!

私の大好きなブログ、イロトリドリのこっこさんから当ブログをご紹介いただきました。相思相愛で良かったです(笑)

私が好きなデザインのWebサイトを5つだけご紹介します。

WebサイトのギャラリーサイトCSSManiaの中から個人的に好みのサイトをご紹介します。

最近Pocketに保存した気になる記事をご紹介します。

「あとで読む」サービスのPocketに最近保存した、私が気になった記事をご紹介します。

CSSの小ネタを5つご紹介します。

CSSの小ネタをいくつかご紹介したいと思います。

CSSで複数の要素を横並びにする方法

複数の要素を横並びにするCSSをまとめてみました。

TOLOTで2014年の卓上カレンダーを作ってみました!

フォトブックを作ってくれるサービスは数多くありますが、今回は卓上カレンダーを作ってくれるTOLOTを利用してみました。このクオリティで送料込みの500円は安い!

ブログに欠かせないShareHtml、AppHtmlの細部をカスタマイズしました。

凝り性の私は細かいところを自分の好きなようにカスタマイズするのが大好きです。今回はShareHtml、AppHtmlを細かくカスタマイズしたのでご紹介します。

Webサイト制作時に素人の私が重宝しているオンラインツールまとめ。

新規Webサイト構築の際にとても重宝しているオンラインツールをまとめてみました。素人にはありがたいものばかりです。