みなさんこんにちは、mayukouです。
ランディングページやネットショップの特集ページなど
ボタンはよく使うと思います。
ボタンは、ちょっとでもこだわると、ページのデザインをグッと引き締めてくれます。
最近のデザインは、フラットデザインからちょっと立体的になったマテリアルデザインも
流行っているようなので、マテリアルデザイン風のボタンのCSSをご紹介します。
スポンサードリンク
2014年にgoogle が発表したデザインで、androidやYouTube など様々なサービスに使われるようになりました。わかりやすさを追求したデザインで、ボタンにドロップシャドウが使われるなど、フラットデザインを立体的にしたのが特徴です。立体感を出すことで、操作性に迷いをなくすことを実現しています。
マテリアルデザインのガイドライン(公式)
マテリアルデザイン風のボタンの作り方
デモをご覧ください。
影をうっすらと入れることで、マテリアルデザインらしさが出ます。まずはデモをご覧ください。
デモ
HTML
1 |
<a href="#" class="sample-btn">ボタン</a> |
CSS
ボックスシャドウ(box-shadow)で、マテリアルデザインらしさを表現しましょう。角丸(border-radius)は、好みでつけてもつけなくても良さそうです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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をご紹介しました。
ご参考にされて下さい。
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。