按鈕

2018-05-24 17:44 更新

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

按鈕中的英文字母都會被轉為大寫。

調用方式

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


相關資源

Material Design 按鈕設計規(guī)范


樣式

扁平按鈕

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

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

在線運行


浮動按鈕

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

www.mdui.org - 按鈕 - 浮動按鈕

在線運行


圖標按鈕

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

www.mdui.org - 按鈕 - 圖標按鈕

在線運行


密集型按鈕

密集型按鈕比普通按鈕稍微小一點,在以鼠標和鍵盤為主要輸入方式的時候可以使用。在普通按鈕上添加類 .mdui-btn-dense 即可。

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

在線運行


禁用狀態(tài)

在按鈕上加上 disabled 屬性禁用一個按鈕。

www.mdui.org - 按鈕 - 禁用狀態(tài)

在線運行


塊級元素

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

www.mdui.org - 按鈕 - 塊級元素

在線運行


CSS 類名列表

 類名 效果
 .mdui-btn 定義一個按鈕
 .mdui-btn-raised 定義浮動按鈕
 .mdui-btn-icon 定義圖標按鈕
 .mdui-btn-block 將按鈕設為塊級元素


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號