CSS3で厚みがあるボタンがへこむコード、陰影にこだわって装飾しました♪

i-onnaテクニカル担当のすくねえです。

今回はふんわりと押せるボタンを作ってみますね。ボタンを押すと、ぺこんとへこむ感じです。

♥ もくじ - 見たいところを押してね♪ 戻るのは「最初から↑」

完成品

ふんわりと押せるボタン

(一時期ミスがあったため、二度目の訪問で万が一表示されない場合、キャッシュをクリアしてください。すいません。
一応、Firefox、Safari、Google Chromeで動作確認済みです。)

今回のこだわりは3つです。

  • ふわふわ柔らく、ユーザーにわかるように押したときではなく、マウスオーバーしたときに凹ませます。マウスをクリックしたときに、さらに凹ませます。
  • ボタンの変化にあわせて、きっちりと陰影の変化が表現されること。変わらないのは変なのでデザインする上で妥協できないポイントですね〜。
  • ボタンが目立つように周囲を凹ませました。凹凸のメリハリをつけています。

htmlとCSSのみで実装しています。

おすすめ記事

結婚・ネット婚活サイト・FACEBOOKアプリでおすすめで安いのは?比較と口コミなら「あいおんな」?

htmlとCSSのソースコード

htmlのコードです。

<p class="center-button"><a class="thickness-button" href="https://i-onna.com" target="_blank">ふんわりと押せるボタン</a></p>

CSSのコードです。

/* ふんわりと押せるボタンの作成 */
a.thickness-button {
	display: block;
	position: relative;
	width: 100%;

	padding: 10px 20px 10px 20px;
	box-shadow: 0 10px 0 #d84f6f, 0 15px 0 #c0c0c0;
	border-radius: 10px 5px 0px 0px / 10px 5px 0px 0px;

	background-color: #f65a7f;
	color: #fff;
	line-height: 1.8;
	text-decoration: none;

	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}
a.thickness-button:hover {
	top: 5px;
	box-shadow: 0 5px 0 #d84f6f, 0 7px 0 #c0c0c0;

	color: #fff;
	text-decoration: none;
}
a.thickness-button:active {
	top: 8px;
	box-shadow: 0 2px 0 #d84f6f, 0 3px 0 #c0c0c0;

	color: #fff;
	text-decoration: none;
}
a.thickness-button:visited {
	color: #fff;
	text-decoration: none;
}
a.thickness-button:focus {
	text-decoration: none;
	color: #fff;
}

/* くぼみと中央合わせ */
.center-button{
	width: 100%;
	padding: 20px 10px 30px 10px;
	background-color: #f2f2f2;
	box-shadow:0px 2px 2px 0px rgba(128, 128, 128, 0.5) inset,
		0px 2px 2px 0px rgba(255, 255, 255, 0.5);
	text-align:center;
}

簡単に解説します。

ボタン動作のポイントは、topとbox-shadowです。今回、各々のボタン動作の中で合計で10になっています。ボタン動作とは「ボタンを押す前」、「マウスオーバー時」、「ボタンを押した瞬間」のことです。ここでボタンの厚み陰影の動きを表現しています。box-shadowの引数の順番はリファレンスをみてくださいね♪

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

参考:CSS3 box-shadow property

他はあまり難しいところはなさそうですね。

a.thickness-buttonという、要素+クラス名になっています。 このボタンのみ下線を消し、文字色を変えたいため、こちらに記述しています。

	text-decoration: none;
	color: #fff;

の箇所です。

border-radiusで角丸は自由に調整してください。垂直方向と水平方向の値を調整できます。 現在、同じ値にしているためもっとシンプルにできますが、ちょっと調整しようかと思って残してあります。 もうすこしこだわりたいのならお好みで調整しちゃってください。

参考:border-radius-CSS3リファレンス

ボタンの厚み(側面)込みで上下の空きスペースを調整します。そのため上下の値が若干違います。 center-buttonのpaddingのところですね。

insetはくぼみですよね。

あとは素人さんでもリファレンスを紐解いていけば簡単に理解できるような気もします。

参考サイト

以下のサイトを参考にさせてもらいました。ありがとうございました。

12436288584_94d6bc46d2_b.jpg
Some creative and modern button styles and effects for your inspiration.
12436288584_94d6bc46d2_b.jpg
個人的に汎用性高いと思う、CSSのみで実装するボタンデザインやホバーエフェクトのまとめです。また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーやジェネレータツールなども併せて紹介します。

cssのプロパティがたくさんあると、記述順番が気になるかもしれませんね。

実はCSSは必要最低限しか使わないため、わりと素人さんですけど何か参考になりましたら幸いです。 すくねえはやっぱりPhotoshopが好き★ 最近はWebじゃなく、C++をもうすこし極めたく勉強中です〜(*´∇`*)

この記事がよかったら「いいね!」「シェア♪」をお願いしますヽ(=´▽`=)ノ

医療脱毛でおすすめで安いのは?比較と口コミなら「あいおんな」 脱毛サロンでおすすめで安いのは?比較と口コミなら「あいおんな」