CSS

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


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

スポンサードリンク

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

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

デモをご覧ください。

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

HTML

CSS

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

最後に

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

投稿者プロフィール

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

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

関連記事

  1. jQuery

    fullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介

    皆さんこんにちは、mayukouです。fullpage.jsというjQ…

  2. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  3. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  4. illustration

    簡単!Illustratorでキラキラ星を作る方法

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

  5. Web Design

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

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

  6. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

コメント

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

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!
  2. コピーライティング

    コピーライティングを学ぶ。わたしがやっている勉強法とコピーの作り方
  3. カメラ

    ブロガーの味方?高級コンデジ、Panasonic LX9を買いました。
  4. レポート

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

    自分のブログを冬仕様に!wordpressに雪を降らせるプラグイン
PAGE TOP