按钮

按钮样式可以使用在 <a>、 <button> 或 <input> 元素上。

按钮中的英文字母都会被转为大写。

调用方式

按钮组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

相关资源

Material Design 按钮设计规范

样式

扁平按钮

为 <a>、 <button> 或 <input> 元素添加类 .mdui-btn 即可获得扁平按钮的样式。

在线运行

浮动按钮

给扁平按钮添加 .mdui-btn-raised 类能使按钮获得浮动效果。

在线运行

图标按钮

给扁平按钮添加类 .mdui-btn-icon 能将其变为图标按钮。

在线运行

密集型按钮

密集型按钮比普通按钮稍微小一点，在以鼠标和键盘为主要输入方式的时候可以使用。在普通按钮上添加类 .mdui-btn-dense 即可。

在线运行

禁用状态

在按钮上加上 disabled 属性禁用一个按钮。

在线运行

块级元素

给按钮加上 .mdui-btn-block 类可以将其拉伸到父元素的 100% 宽度，且按钮变为块级（block）元素。

在线运行

CSS 类名列表