一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

ホーム
CSS, Web Design
一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

2017.03.25

一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

みなさんこんにちは、mayukouです。
ランディングページやネットショップの特集ページなど
ボタンはよく使うと思います。
ボタンは、ちょっとでもこだわると、ページのデザインをグッと引き締めてくれます。
最近のデザインは、フラットデザインからちょっと立体的になったマテリアルデザインも
流行っているようなので、マテリアルデザイン風のボタンのCSSをご紹介します。

スポンサードリンク

マテリアルデザインとは？
2014年にgoogle が発表したデザインで、androidやYouTube など様々なサービスに使われるようになりました。わかりやすさを追求したデザインで、ボタンにドロップシャドウが使われるなど、フラットデザインを立体的にしたのが特徴です。立体感を出すことで、操作性に迷いをなくすことを実現しています。
マテリアルデザインのガイドライン（公式）

マテリアルデザイン風のボタンの作り方

デモをご覧ください。

影をうっすらと入れることで、マテリアルデザインらしさが出ます。まずはデモをご覧ください。
デモ

HTML

<a href="#" class="sample-btn">ボタン</a>

1	<a href="#" class="sample-btn">ボタン</a>

CSS

ボックスシャドウ（box-shadow）で、マテリアルデザインらしさを表現しましょう。角丸（border-radius）は、好みでつけてもつけなくても良さそうです。

.sample-btn {
box-shadow:1px 1px 5px #000;
width:100px;
height:20px;
padding: 10px;
border-radius:5px;
text-decoration: none;
text-align: center;
background-color: #0B9A00;
color: #fff;
display: inline-block;
}

.sample-btn:hover {
    box-shadow:1px 1px 10px #000;
}

.sample-btn {

box-shadow:1px 1px 5px #000;

width:100px;

height:20px;

padding: 10px;

border-radius:5px;

text-decoration: none;

text-align: center;

background-color: #0B9A00;

color: #fff;

display: inline-block;

}

.sample-btn:hover {

box-shadow:1px 1px 10px #000;

}

最後に

いかがでしたか？
マテリアルデザイン風のボタンのCSSをご紹介しました。
ご参考にされて下さい。

投稿者プロフィール

mayukou: Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

プロフィール

mayukou

こんにちは！mayukouと申します。福岡市でハーブティー専門店のデザイナーをしています。デザイナー10年目。海外で活動できる一流デザイナーを目指しています。洋楽好き（特にR&B）。Mac&iPhoneユーザー。AB型です。自分の学んだこと、役に立つことを発信していきたいと思います。よろしくおねがいします。