KUSU'S SITE
2015年4月18日

フラットなボタンをCSSで作るには?

  

 近年はサイトのデザインでフラットデザインを取り入れているコーポレートサイトや個人サイトをよく見かけます。そこでたまに見るのが、上の画像のようなフラットなデザインのボタン。フレットな感じでありながら、立体的なデザインでもあるため、パッと見でもボタンとなっており、
「これを押したら何かなるのかな?」
と初めて見た人でもわかるようなものになっているのが特徴です。そこで今回はこのデザインをCSSで表現する方法を紹介したいと思います(^^)

 まず、以下のようなボタンをサイトに設置したいとします。

見本コード

 このようなデザインのボタンを設置するには、以下のようにaタグに対してCSSを設定してあげます。

a {
	width: 150px;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	background: #3498db;
	border-radius: 5px;
	display: block;
	box-shadow: 0 5px 0 #2980b9;
}

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

box-shadowでボタンを立体的に見せる

 上の見本コードでも強調しているように、aタグに指定してある
box-shadow: 0 5px 0 #2980b9;
こちらで指定した色がボタンの立体部分の色となり、太さがそのまま立体的な部分の幅となります。box-shadowで対象物に対して影を付けてあげることで立体的にさせている、ということですね!

ボタンにマウスカーソルを乗せた時の表示

 続いて、ボタンにマウスカーソルを乗せた時に、ボタンが押されたような表示にさせるために

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

このようにCSSを設定してあります。
こう設定することでマウスカーソルを乗せた時にボタンがポチっと押されたような表示にさせることができます(^^)

まとめ

 このようにaタグにCSSを指定してあげることでフラットなデザインのボタンを設置することができるようになります!

 なお、フラットデザインでよく使われている色を知りたいなぁ、という方がいらっしゃいましたら、Flat UI Colorsというサイトにフラットデザインで使われる色が紹介されていますので、コチラを参考にしてみてはいかがでしょうか? 自分も今回見本で使った色はコチラのサイトから色を使わせていただきました(^-^)

スポンサーリンク
スポンサーリンク

コメントを残す




CAPTCHA


スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック!
ホームページの制作依頼希望の方はまず↓をタップ!
サービスの詳細

WordPress講習会について

WordPress講習会について
気になる方ははまず↓をクリック!
WordPress講習会について気になる方はまず↓をタップ!
サービスの詳細

TWITTER


ページトップに戻る