CSS

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


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

スポンサードリンク

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

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

デモをご覧ください。

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

HTML

CSS

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

最後に

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

投稿者プロフィール

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

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

関連記事

  1. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方

    みなさんこんにちは、mayukouです。だいぶ春らしくなってきました…

  2. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  3. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  4. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  5. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

コメント

  • コメント (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. jQuery

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!
  2. wordpress

    【制作実績】wordpressでイラストレーターさんのポートフォリオサイトを作成…
  3. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法
  4. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ
  5. お知らせ

    レバテック様よりphotoshopプラグインの記事が紹介されました
PAGE TOP