編集 Github

ボタン

フォーム、ダイアログなどのアクションにMaterial Dashboardのカスタムボタンスタイルを使用し、複数のサイズ、状態などをサポートします。

例

Material DashboardはBootstrapから事前定義されたボタンスタイルを変更しました。それぞれが独自のセマンティック目的を果たし、より多くの制御のためにいくつかの追加機能が投入されました。

<button type="button" class="btn btn-primary">一次</button>
<button type="button" class="btn btn-info">情報</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危険</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-default">デフォルト</button>

スタイルボタン

<button class="btn btn-primary">デフォルト</button>
<button class="btn btn-primary btn-round">円形</button>
<button class="btn btn-primary btn-round">
  <i class="material-icons">favorite</i> アイコン付き
</button>
<button class="btn btn-primary btn-fab btn-fab-mini btn-round">
  <i class="material-icons">favorite</i>
</button>
<button class="btn btn-primary btn-link">単純な</button>

サイズ

大きくても小さくてもいいですか？追加のサイズには .btn-lgまたは .btn-smを追加してください。

<button class="btn btn-primary btn-sm">小さい</button>
<button class="btn btn-primary">普通の</button>
<button class="btn btn-primary btn-lg">大</button>

ソーシャルボタン - プロ 成分

<div class="row">
   <div class="col-md-3 social-buttons-demo">
    <button class="btn btn-social btn-fill btn-twitter">
      <i class="fa fa-twitter"></i> 接続する
    </button>
    <br>
    <button class="btn btn-social btn-fill btn-facebook">
      <i class="fa fa-facebook-square"></i> シェア &middot; 2.2k
    </button>
    <br>
    <button class="btn btn-social btn-fill btn-google">
      <i class="fa fa-google-square"></i> シェア on Google+
    </button>
    <br>
    <button class="btn btn-social btn-fill btn-linkedin">
      <i class="fa fa-linkedin-square"></i> 接続する
    </button>
    <br>
    <button class="btn btn-social btn-fill btn-pinterest">
      <i class="fa fa-pinterest"></i> ピン it &middot; 212
    </button>
    <br>
    <button class="btn btn-social btn-fill btn-youtube">
      <i class="fa fa-youtube-play"></i> 見る
    </button>
    <br>
    <button class="btn btn-social btn-fill btn-tumblr">
      <i class="fa fa-tumblr-square"></i> 再投稿
    </button><br>
    <button class="btn btn-social btn-fill btn-github">
      <i class="fa fa-github"></i> 接続する
    </button><br>
    <button class="btn btn-social btn-fill btn-behance">
      <i class="fa fa-behance-square"></i> フォローする
    </button><br>
    <button class="btn btn-social btn-fill btn-dribbble">
      <i class="fa fa-dribbble"></i> 私たちを見つける
    </button><br>
    <button class="btn btn-social btn-fill btn-reddit">
      <i class="fa fa-reddit"></i> 再投稿 &middot; 232
    </button><br>
   </div>
   <div class="col-md-1 social-buttons-demo">
    <button class="btn btn-social btn-just-icon btn-twitter">
      <i class="fa fa-twitter"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-facebook">
      <i class="fa fa-facebook"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-google">
      <i class="fa fa-google"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-linkedin">
      <i class="fa fa-linkedin"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-pinterest">
      <i class="fa fa-pinterest"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-youtube">
      <i class="fa fa-youtube"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-tumblr">
      <i class="fa fa-tumblr"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-github">
      <i class="fa fa-github"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-behance">
      <i class="fa fa-behance"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-dribbble">
      <i class="fa fa-dribbble"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon  btn-reddit">
      <i class="fa fa-reddit"></i>
    </button><br>
   </div>
   <div class="col-md-1 social-buttons-demo">
    <button class="btn btn-social btn-just-icon btn-round btn-twitter">
      <i class="fa fa-twitter"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-facebook">
      <i class="fa fa-facebook"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-google">
      <i class="fa fa-google"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-linkedin">
      <i class="fa fa-linkedin"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-pinterest">
      <i class="fa fa-pinterest"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-youtube">
      <i class="fa fa-youtube"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-tumblr">
      <i class="fa fa-tumblr"> </i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-github">
      <i class="fa fa-github"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-behance">
      <i class="fa fa-behance"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-dribbble">
      <i class="fa fa-dribbble"></i>
    </button><br>
    <button class="btn btn-social btn-just-icon btn-round btn-reddit">
      <i class="fa fa-reddit"></i>
    </button><br>
   </div>
   <div class="col-md-1 social-buttons-demo">
    <button class="btn btn-social btn-link btn-twitter">
      <i class="fa fa-twitter"></i>
    </button><br>
    <button class="btn btn-social btn-link btn-facebook">
      <i class="fa fa-facebook-square"> </i>
    </button><br>
    <button class="btn btn-social btn-link btn-google">
      <i class="fa fa-google"> </i>
    </button><br>
    <button class="btn btn-social btn-link btn-linkedin">
      <i class="fa fa-linkedin-square"></i>
    </button><br>
    <button class="btn btn-social btn-link btn-pinterest">
      <i class="fa fa-pinterest"></i>
    </button><br>
    <button class="btn btn-social btn-link btn-youtube">
      <i class="fa fa-youtube"> </i>
    </button><br>
    <button class="btn btn-social btn-link btn-tumblr">
      <i class="fa fa-tumblr-square"> </i>
    </button><br>
    <button class="btn btn-social btn-link btn-github">
      <i class="fa fa-github"></i>
    </button><br>
    <button class="btn btn-social btn-link btn-behance">
      <i class="fa fa-behance"></i>
    </button><br>
    <button class="btn btn-social btn-link btn-dribbble">
      <i class="fa fa-dribbble"></i>
    </button><br>
    <button class="btn btn-social btn-link btn-reddit">
      <i class="fa fa-reddit"></i>
    </button><br>
   </div>
   <div class="col-md-3 social-buttons-demo">
    <button class="btn btn-social btn-link btn-twitter">
      <i class="fa fa-twitter"></i> 接続する
    </button><br>
    <button class="btn btn-social btn-link btn-facebook">
      <i class="fa fa-facebook-square"></i> シェア &middot; 2.2k
    </button><br>
    <button class="btn btn-social btn-link btn-google">
      <i class="fa fa-google-square"></i> シェア on Google+
    </button><br>
    <button class="btn btn-social btn-link btn-linkedin">
      <i class="fa fa-linkedin-square"></i> 接続する
    </button><br>
    <button class="btn btn-social btn-link btn-pinterest">
      <i class="fa fa-pinterest"></i> Pin it &middot; 212
    </button><br>
    <button class="btn btn-social btn-link btn-youtube">
      <i class="fa fa-youtube-play"></i> 見る
    </button><br>
    <button class="btn btn-social btn-link btn-tumblr">
      <i class="fa fa-tumblr-square"></i> 再投稿
    </button><br>
    <button class="btn btn-social btn-link btn-github">
      <i class="fa fa-github"></i> 接続する
    </button><br>
    <button class="btn btn-social btn-link btn-behance">
      <i class="fa fa-behance-square"></i> フォローする
    </button><br>
    <button class="btn btn-social btn-link btn-dribbble">
      <i class="fa fa-dribbble"></i> 私たちを見つける
    </button><br>
    <button class="btn btn-social btn-link btn-reddit">
      <i class="fa fa-reddit"></i> 再投稿 &middot; 232
    </button><br>
   </div>
</div>

無効状態

<button>要素に disabledブール属性を追加することでボタンを非アクティブに見せます。

<button type="button" class="btn btn-lg btn-primary" disabled>一次 ボタン</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>ボタン</button>

<a>要素を使って無効にされたボタンは少し違った振る舞いをします：

  • <a>は disabled属性をサポートしていないので、視覚的に無効に見えるようにするには .disabledクラスを追加しなければなりません。
  • アンカーボタン上のすべての pointer-eventsを無効にするための将来に役立つスタイルがいくつか含まれています。そのプロパティをサポートしているブラウザでは、無効なカーソルはまったく表示されません。
一次 リンク リンク 
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">
一次 リンク</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">リンク</a>

あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.