Neat Design Journal

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

完成形

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

SNSシェア用ボタン

カエレバリンク用ボタン

HTML

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

<div class="button"><a href="">リンクテキスト</a></div>

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

CSS

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

.button a {
	font-size: 16px; /* 文字のサイズ */
	color: #f8f8f8; /* 文字の色 */
	text-decoration: none;
	text-align: center;
	padding: 12px 0;
	width: 240px; /* ボタンの幅 */
	background: #1da1f2; /* ボタンの背景色 */
	display: block;
	transition: .2s;
	box-shadow: 0 3px 0 #0a71b0;
	border-radius: 3px;
}

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

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

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

.button a:hover {
	box-shadow: none;
	transform: translate3d(0, 3px, 0);
}

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

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

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

最後に

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

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