纽扣
使用“材质仪表板”的自定义按钮样式进行表单，对话框等操作，并支持多种大小，状态等。
例子
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> 分享 · 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 · 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> 转贴 · 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> 分享 · 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 · 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> 转贴 · 232
</button><br>
</div>
</div>禁用状态
通过将disabled布尔属性添加到任何<button>元素，使按钮看起来不活动。
<button type="button" class="btn btn-lg btn-primary" disabled>主 按键</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>按键</button>使用<a>元素的禁用按钮表现略有不同：
- `不支持
disabled属性，因此必须添加.disabled类才能使其在视觉上显示为禁用。 - 包括一些未来友好的样式，以禁用锚点按钮上的所有“指针事件”。 在支持该属性的浏览器中，根本不会看到禁用的光标。
<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.