基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

按鈕

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

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

呼叫方式

按鈕元件使用純 CSS 編寫，只需編寫 HTML 程式碼即可生效。

樣式

扁平按鈕

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

範例

<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>

浮動按鈕

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

範例

<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>

圖示按鈕

給扁平按鈕添加類別 .mdui-btn-icon 能將其變為圖示按鈕。

範例

<button class="mdui-btn mdui-btn-icon">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

密集型按鈕

密集型按鈕比普通按鈕稍小，適用於以滑鼠和鍵盤為主要輸入方式的場景。在普通按鈕上添加類別 .mdui-btn-dense 即可。

範例

<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

禁用狀態

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

範例

<button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
  <i class="mdui-icon material-icons">add</i>
</button>

區塊級元素

給按鈕加上 .mdui-btn-block 類別可以將其拉伸到父元素的 100% 寬度，且按鈕變為區塊級（block）元素。

範例

<div class="mdui-row-xs-2">
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
</div>

按鈕群組

把多個按鈕放在一個按鈕群組容器 .mdui-btn-group 內，即成為按鈕群組。在按鈕上添加類別 .mdui-btn-active 表示該按鈕處於選取狀態。

範例

<div class="mdui-btn-group">
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_left</i>
  </button>
  <button type="button" class="mdui-btn mdui-btn-active">
    <i class="mdui-icon material-icons">format_align_center</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_right</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_justify</i>
  </button>
</div>

CSS 類別清單

類別名稱	說明
`.mdui-btn`	定義一個按鈕
`.mdui-btn-raised`	定義浮動按鈕
`.mdui-btn-icon`	定義圖示按鈕
`.mdui-btn-block`	將按鈕設為區塊級元素
`.mdui-btn-group`	按鈕群組的容器
`.mdui-btn-active`	按鈕群組中的按鈕處於選取狀態

漣漪效果

浮動動作按鈕

按鈕