codecamp

按钮

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

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

调用方式

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

相关资源

Material Design 按钮设计规范

样式

扁平按钮

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

www.mdui.org - 按钮 - 扁平按钮

浮动按钮

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

www.mdui.org - 按钮 - 浮动按钮

图标按钮

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

www.mdui.org - 按钮 - 图标按钮

密集型按钮

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

www.mdui.org - 按钮 - 密集型按钮

禁用状态

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

www.mdui.org - 按钮 - 禁用状态

块级元素

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

www.mdui.org - 按钮 - 块级元素

CSS 类名列表

类名	效果
.mdui-btn	定义一个按钮
.mdui-btn-raised	定义浮动按钮
.mdui-btn-icon	定义图标按钮
.mdui-btn-block	将按钮设为块级元素

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }