按鈕

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

按鈕中的英文字母都會(huì)被轉(zhuǎn)為大寫。

調(diào)用方式

按鈕組件使用純 CSS 編寫，只需編寫 HTML 代碼即可生效。

相關(guān)資源

Material Design 按鈕設(shè)計(jì)規(guī)范

樣式

扁平按鈕

為 <a>、 <button> 或 <input> 元素添加類 .mdui-btn 即可獲得扁平按鈕的樣式。

在線運(yùn)行

浮動(dòng)按鈕

給扁平按鈕添加 .mdui-btn-raised 類能使按鈕獲得浮動(dòng)效果。

在線運(yùn)行

圖標(biāo)按鈕

給扁平按鈕添加類 .mdui-btn-icon 能將其變?yōu)閳D標(biāo)按鈕。

在線運(yùn)行

密集型按鈕

密集型按鈕比普通按鈕稍微小一點(diǎn)，在以鼠標(biāo)和鍵盤為主要輸入方式的時(shí)候可以使用。在普通按鈕上添加類 .mdui-btn-dense 即可。

在線運(yùn)行

禁用狀態(tài)

在按鈕上加上 disabled 屬性禁用一個(gè)按鈕。

在線運(yùn)行

塊級(jí)元素

給按鈕加上 .mdui-btn-block 類可以將其拉伸到父元素的 100% 寬度，且按鈕變?yōu)閴K級(jí)（block）元素。

在線運(yùn)行

CSS 類名列表