CSS

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


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

スポンサードリンク

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

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

デモをご覧ください。

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

HTML

CSS

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

最後に

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

投稿者プロフィール

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

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  2. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  3. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  4. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  5. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. wordpress

    wordpressが重たい!そんな困った時に便利なプラグイン
  2. Photoshop

    必見!Photoshopでスタンプ風のかすれた表現をする方法まとめ
  3. Photoshop

    Photoshopでパターンを作ろう!斜めストライプを作る方法とは?
  4. レポート

    CSS nite Fukuoka vol.5行ってきました。Illustrato…
  5. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!
PAGE TOP