1.介绍
Material Design Lite（MDL）按钮组件是标准HTML <button>元素的增强版。 一个按钮由文字和/或图像组成，清楚地表明用户点击或触摸时会发生什么动作。 MDL按钮组件提供各种类型的按钮，并允许您添加显示效果和点击效果。无论网站的内容或功能如何，按钮都是大多数用户界面中无处不在的功能。 因此，它们的设计和使用是整体用户体验的重要因素。
可用的按钮的显示类型是平的（默认），凸起的，FAB按钮，mini-fab按钮和图标; 这些类型中的任何一种都可能是普通的（浅灰色）或彩色的，并且可能会初始化或以编程方式禁用。 FAB按钮，mini-fab按钮和图标按钮类型通常使用小图像作为标题而不是文本。
2.配置选项
MDL CSS类将各种预定义的视觉和行为增强应用于按钮。下表列出了可用的类及其效果。
| 类名 | 效果 | 备注 |
| mdl-button | 定义标签为MDL组件 | 必需 |
| mdl-js-button | 为按钮组件添加默认效果 | 必需 |
| mdl-button--raised | 添加点击阴影效果 | 不与fab, mini-fab, 和icon效果叠加 |
| mdl-button--fab | 设置按钮为圆形 | 不与fab, mini-fab, 和icon效果叠加 |
| mdl-button--mini-fab | 设置按钮为小圆形 | 需要先引用fab，不与raised和icon效果叠加 |
| mdl-button--icon | 设置按钮为icon效果 | 不与raised，fab和mini-fab效果叠加 |
| mdl-button--colored | 为按钮添加颜色效果 | 颜色定义在material.min.css文件中 |
| mdl-button--primary | 设置按钮为默认颜色 | 颜色定义在material.min.css文件中 |
| mdl-button--accent | 为按钮添加覆盖颜色 | 颜色定义在material.min.css文件中 |
| mdl-js-ripple-effect | 添加点击波纹效果 | 可以与其他类结合使用 |
注意：所有类型的按钮都提供了使用disabled禁用功能：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>
可以使用mdl-button - disabled类实现相同的样式，但不禁用元素的功能。 该属性可以通过脚本编程添加或删除。
3.应用举例
3.1.设置为带颜色的圆形按钮
带颜色的圆形按钮和附带点击波纹效果
<!-- Colored FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"> <i class="material-icons">add</i> </button> <!-- Colored FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> <i class="material-icons">add</i> </button>
3.2.设置为不带颜色的圆形按钮
默认、带点击波纹效果和禁用点击
<!-- FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab"> <i class="material-icons">add</i> </button> <!-- FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> <i class="material-icons">add</i> </button> <!-- Disabled FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab" disabled> <i class="material-icons">add</i> </button>
3.3.矩形按钮
点击带阴影、点击带阴影波纹效果和禁用点击
<!-- Raised button --> <button class="mdl-button mdl-js-button mdl-button--raised"> Button </button> <!-- Raised button with ripple --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Button </button> <!-- Raised disabled button --> <button class="mdl-button mdl-js-button mdl-button--raised" disabled> Button </button>
3.4.矩形按钮带颜色按钮
默认颜色带点击阴影、覆盖颜色带点击阴影和覆盖颜色带点击波纹
<!-- Colored raised button --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Button </button> <!-- Accent-colored raised button --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"> Button </button> <!-- Accent-colored raised button with ripple --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Button </button>
3.5.默认按钮
默认按钮，默认带点击波纹和禁用点击
<!-- Flat button --> <button class="mdl-button mdl-js-button"> Button </button> <!-- Flat button with ripple --> <button class="mdl-button mdl-js-button mdl-js-ripple-effect"> Button </button> <!-- Disabled flat button --> <button class="mdl-button mdl-js-button" disabled> Button </button>
3.6.默认按钮带颜色
默认颜色和覆盖颜色
<!-- Primary-colored flat button --> <button class="mdl-button mdl-js-button mdl-button--primary"> Button </button> <!-- Accent-colored flat button --> <button class="mdl-button mdl-js-button mdl-button--accent"> Button </button>
3.7.设置为iscon图标按钮
默认颜色和设置颜色
<!-- Icon button --> <button class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">mood</i> </button> <!-- Colored icon button --> <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored"> <i class="material-icons">mood</i> </button>
3.8.小圆形按钮
小圆形按钮不带颜色和带颜色
<!-- Mini FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"> <i class="material-icons">add</i> </button> <!-- Colored mini FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"> <i class="material-icons">add</i> </button>
