WEB制作

Material Design for Bootstrap4（その2）ボタンの実装

Material Design for Bootstrap4（その2）ボタンの実装

Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。

そのBootstrap4対応バージョン、「Material Design for Bootstrap4（以下、MDB4と表記）」のご紹介2回目です。

今回はボタンの実装について。

＊Material Design for Bootstrap

～ 目次 ～

  • 基本的なボタン
  • MDB4での独自色ボタン
  • アウトラインボタン
  • ボタンのサイズ
  • ソーシャルボタン

基本的なボタン

コードの記述方法は基本的には本家Bootstrapと同じです。
表示がマテリアルデザイン化します。

<!-- Primary button -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Default button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Secondary button -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

ブラウザでの表示

実際のホバー時の変化などはデモページをご覧ください。

＊デモページ MDB4：ボタンの実装

同じコードを本家Bootstrapで表示すると以下のようになります。

MDB4での独自色ボタン

MDB4ではBootstrapには無い独自色のボタンを実装可能です。

<!--Elegant-->
<button type="button" class="btn btn-elegant">Elegant</button>

<!--Unique-->
<button type="button" class="btn btn-unique">Unique</button>

<!--Pink-->
<button type="button" class="btn btn-pink">Pink</button>

<!--Purple-->
<button type="button" class="btn btn-purple">Purple</button>

<!--Deep-purple-->
<button type="button" class="btn btn-deep-purple">Deep-purple</button>

<!--Indigo-->
<button type="button" class="btn btn-indigo">Indigo</button>

<!--Light blue-->
<button type="button" class="btn btn-light-blue">Light blue</button>

<!--Cyan-->
<button type="button" class="btn btn-cyan">Cyan</button>

<!--Dark-green-->
<button type="button" class="btn btn-dark-green">Dark-green</button>

<!--Light-green-->
<button type="button" class="btn btn-light-green">Light-green</button>

<!--Yellow-->
<button type="button" class="btn btn-yellow">Yellow</button>

<!--Amber-->
<button type="button" class="btn btn-amber">Amber</button>

<!--Deep-orange-->
<button type="button" class="btn btn-deep-orange">Deep-orange</button>

<!--Brown-->
<button type="button" class="btn btn-brown">Brown</button>

<!--Blue-grey-->
<button type="button" class="btn btn-blue-grey">Grey</button>

<!--MDB-->
<button type="button" class="btn btn-mdb-color">MDB</button>

ブラウザでの表示

実際のホバー時の変化などはデモページをご覧ください。

＊デモページ MDB4：ボタンの実装

アウトラインボタン

コードの記述方法は基本的には本家Bootstrapと同じです。
表示がマテリアルデザイン化します。

<button type="button" class="btn btn-outline-primary waves-effect">Primary</button>

<button type="button" class="btn btn-outline-default waves-effect">Default</button>

<button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button>

<button type="button" class="btn btn-outline-success waves-effect">Success</button>

<button type="button" class="btn btn-outline-info waves-effect">Info</button>

<button type="button" class="btn btn-outline-warning waves-effect">Warning</button>

<button type="button" class="btn btn-outline-danger waves-effect">Danger</button>

ブラウザでの表示

実際のホバー時の変化などはデモページをご覧ください。

＊デモページ MDB4：ボタンの実装

同じコードを本家Bootstrapで表示すると以下のようになります。

ちなみに、このアウトラインボタンは、Bootstrap4から実装が始まったボタンです。

ボタンのサイズ

大サイズボタン、小サイズボタンも用意されています。

<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>

ブラウザでの表示

実際のホバー時の変化などはデモページをご覧ください。

＊デモページ MDB4：ボタンの実装

ソーシャルボタン

Font-awesomeのアイコンを使うことで、ソーシャルボタンの実装も可能です。

<!--Facebook-->
<button type="button" class="btn btn-indigo">
    <i class="fa fa-facebook left"></i> Facebook</button>

<!--Twitter-->
<button type="button" class="btn btn-light-blue">
    <i class="fa fa-twitter left"></i> Twitter</button>

<!--Google +-->
<button type="button" class="btn btn-danger">
    <i class="fa fa-google-plus left"></i> Google +</button>

<!--Linkedin-->
<button type="button" class="btn btn-primary">
    <i class="fa fa-linkedin left"></i> Linkedin</button>

<!--Instagram-->
<button type="button" class="btn btn-indigo">
    <i class="fa fa-instagram left"></i> Instagram</button>

<!--Pinterest-->
<button type="button" class="btn btn-unique">
    <i class="fa fa-pinterest left"></i> Pinterest</button>

<!--Youtube-->
<button type="button" class="btn btn-danger">
    <i class="fa fa-youtube left"></i> Youtube</button>

<!--Vkontakte-->
<button type="button" class="btn btn-indigo">
    <i class="fa fa-vk left"></i> Vkontakte</button>

<!--Stack Overflow-->
<button type="button" class="btn btn-amber">
    <i class="fa fa-stack-overflow left"></i> Stack Overflow</button>

<!--Slack-->
<button type="button" class="btn btn-default">
    <i class="fa fa-slack left"></i> Slack</button>

<!--Github-->
<button type="button" class="btn btn-elegant">
    <i class="fa fa-github left"></i> Github</button>

<!--Comments-->
<button type="button" class="btn btn-cyan">
    <i class="fa fa-comments left"></i> Comments</button>

<!--Email-->
<button type="button" class="btn btn-elegant">
    <i class="fa fa-envelope left"></i> Email</button>

<!--Dribbble-->
<button type="button" class="btn btn-pink">
    <i class="fa fa-dribbble left"></i> Dribbble</button>

ブラウザでの表示

アイコンだけでの小サイズ。

<!--Facebook-->
<button type="button" class="btn btn-indigo">
    <i class="fa fa-facebook"></i>
</button>

<!--Twitter-->
<button type="button" class="btn btn-light-blue">
    <i class="fa fa-twitter"></i>
</button>

<!--Google +-->
<button type="button" class="btn btn-danger">
    <i class="fa fa-google-plus"></i>
</button>
<!--Linkedin-->
<button type="button" class="btn btn-primary">
    <i class="fa fa-linkedin"></i>
</button>

<!--Instagram-->
<button type="button" class="btn btn-indigo">
    <i class="fa fa-instagram"></i>
</button>

<!--Pinterest-->
<button type="button" class="btn btn-unique">
    <i class="fa fa-pinterest"></i>
</button>

<!--Youtube-->
<button type="button" class="btn btn-danger">
    <i class="fa fa-youtube"></i>
</button>

<!--Vkontakte-->
<button type="button" class="btn btn-indigo">
    <i class="fa fa-vk"></i>
</button>

<!--Stack Overflow-->
<button type="button" class="btn btn-amber">
    <i class="fa fa-stack-overflow"></i>
</button>

<!--Slack-->
<button type="button" class="btn btn-default">
    <i class="fa fa-slack"></i>
</button>

<!--Github-->
<button type="button" class="btn btn-elegant">
    <i class="fa fa-github"></i>
</button>

<!--Comments-->
<button type="button" class="btn btn-cyan">
    <i class="fa fa-comments"></i>
</button>

<!--Email-->
<button type="button" class="btn btn-elegant">
    <i class="fa fa-envelope"></i>
</button>

 <!--Dribbble-->
<button type="button" class="btn btn-pink">
    <i class="fa fa-dribbble left"></i>
</button>

ブラウザでの表示

実際のホバー時の変化などはデモページをご覧ください。

＊デモページ MDB4：ボタンの実装

ちなみに、このソーシャルボタン、色は公式カラーに似せてますが完全に同じではありません。

 

ken
諸事多忙に付、久々の投稿になってしまいました(^_^;)

 

関連記事
Material Design for Bootstrap4（その5）色・文字色の指定
関連記事Material Design for Bootstrap4（その5）色・文字色の指定
Material Design for Bootstrap4（その4）マスクの実装
関連記事Material Design for Bootstrap4（その4）マスクの実装
Material Design for Bootstrap4（その3）シャドウとホバーエフェクトの実装
関連記事Material Design for Bootstrap4（その3）シャドウとホバーエフェクトの実装
Material Design for Bootstrap4（その1）導入とカードデザインの実装
関連記事Material Design for Bootstrap4（その1）導入とカードデザインの実装

 

シェアしてね！

WEBサイトをWordPressにて低価格・高品質で作成します

ご希望内容をお伺いした上で、金額・納期をお見積もりいたします。

お見積もり・ご注文はクラウドソーシングの「ランサーズ」にて承っております。
＊ランサーズのアカウント（無料登録）が必要となります。

ランサーズでのお見積もりはこちら
お問い合わせはこちら
  • 使用するWordPressテーマは、当方にてライセンス権を購入済の「Swell」「Lightning有料版」「Katawara」の３つの中から選択する形となります。
  • お見積もり後、金額・納期が折り合わなければ発注しなくても大丈夫です。

月別アーカイブ