Material Design 是 Google 推出的一种设计语言，旨在为移动设备和 Web 应用程序提供一致的外观和感觉。其中，按钮是 Material Design 中的一个重要组件之一，其样式和交互效果都非常值得学习和借鉴。本文将介绍 Material Design 按钮的各种实现方法，包括 HTML、CSS 和 JavaScript 的实现方式，并提供示例代码以供参考。
1. 基础按钮
基础按钮是 Material Design 中最简单的按钮，它的样式和 HTML 结构都非常简单。下面是一个基础按钮的示例代码：
<button class="mdc-button"> Click me </button>
这个按钮的样式可以通过 CSS 来实现，具体代码如下：
-- -------------------- ---- ------- ----------- - ----------------- -------- ------ ----- -------------- ---- ---------- ----- -------- --- ----- ------- ----- ------- -------- -
这个按钮的样式非常简单，只有背景色、文字颜色、圆角、字体大小、内边距和鼠标指针样式等基本属性。不过，这个按钮已经具备了 Material Design 的基本风格，可以作为其他按钮样式的基础。
2. 浮动按钮
浮动按钮是 Material Design 中常见的一种按钮，它通常用于页面的主要操作。下面是一个浮动按钮的示例代码：
<button class="mdc-fab">
<span class="mdc-fab__icon">
<i class="material-icons">add</i>
</span>
</button>这个浮动按钮的样式可以通过 CSS 来实现，具体代码如下：
-- -------------------- ---- ------- -------- - ----------------- -------- ------ ----- -------------- ---- ------ ----- ------- ----- ------- ----- ------- -------- -------- ----- ------------ ------- ---------------- ------- ----------- --- --- --- ------- -- -- ------ --------- ------ ------- ----- ------ ----- - -------------- - ---------- ----- -
这个浮动按钮的样式比基础按钮要复杂一些，它包括了背景色、文字颜色、圆角、宽度、高度、内边距、鼠标指针样式、阴影、位置等属性。此外，浮动按钮还需要一个内部的图标来表示它的功能，这里使用了 Material Icons 中的 add 图标。
3. 文字按钮
文字按钮是 Material Design 中一种简单的按钮，它通常用于页面中次要的操作。下面是一个文字按钮的示例代码：
<button class="mdc-button mdc-button--outlined"> Click me </button>
这个文字按钮的样式可以通过 CSS 来实现，具体代码如下：
-- -------------------- ---- ------- --------------------- - ----------------- ------------ ------ -------- -------------- ---- ---------- ----- -------- --- ----- ------- --- ----- -------- ------- -------- -
这个文字按钮的样式和基础按钮非常相似，只是背景色变为了透明，文字颜色变为了蓝色，同时增加了一个 1px 的边框。这种样式的按钮适合用于页面中次要的操作，可以起到一定的提示作用。
4. 图标按钮
图标按钮是 Material Design 中一种常见的按钮，它通常用于页面中简单的操作。下面是一个图标按钮的示例代码：
<button class="mdc-button"> <i class="material-icons">favorite</i> </button>
这个图标按钮的样式可以通过 CSS 来实现，具体代码如下：
-- -------------------- ---- ------- ----------- - ----------------- ------------ ------ -------- -------------- ---- ------ ----- ------- ----- ------- --- ----- -------- ------- -------- -------- ----- ------------ ------- ---------------- ------- - ----------- - - ---------- ----- -
这个图标按钮的样式和文字按钮非常相似，只是背景色变为了透明，同时增加了一个 1px 的边框。此外，图标按钮需要一个内部的图标来表示它的功能，这里使用了 Material Icons 中的 favorite 图标。
5. 复选框按钮
复选框按钮是 Material Design 中一种常见的按钮，它通常用于页面中需要用户选择多个选项的场景。下面是一个复选框按钮的示例代码：
-- -------------------- ---- -------
------ ---------------------
------ --------------- -------------------------------------
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------ ----------- -------------- --------- -------------
------
---- --------------------------------------
------
---- -----------------------------------
--------这个复选框按钮的样式可以通过 CSS 来实现，具体代码如下：
-- -------------------- ---- ------- ------------- - -------- ------------ ------------ ------- ------- -------- - ----------------------------- - --------- --------- -------- -- - ------------------------- - --------- --------- -------- ------------ ------------ ------- ---------------- ------- ------ ----- ------- ----- ------------- ---- ------- --- ----- -------- -------------- ---- - --------------------------------- - -------- --- -------- ------ --------- --------- ---- ------ ----- ------ ------ ----- ------- ----- ----------------- ------- -- -- ----- -------------- ---- -------- -- ----------- ------- ---- ------------ - --------------------------------------- - -------- -- - ------------------------ - ----- ----- ------- ----- ------------- -- --------------- ------ ---------------- ------ ------- ----- ------ ----- ----------- ------- - ------------------------------------- - ------------------------- ------------------------ - ----------- -------- - ------------------------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ------ ----- ------- ----- ------- --- ----- -------- -------------- ---- ----------- ------- - ------------------------------------------- - ------------------------- ------------------------ - ----------- -------- - --------------------- - --------- --------- ----- -- ---- -- ------ ----- ------- ----- -------------- ---- ----------------- ------- -- -- ----- -------- -- ----------- ------- ---- ------------ - ------------------- --------------------- - -------- -- - -------------------------------------- - ------------------------- - -------- ---- ------- ------------ - -------------------------------------- - --------------------- - -------- ----- -
这个复选框按钮的样式非常复杂，它包括了背景、边框、鼠标悬停效果、选中状态、不确定状态、禁用状态等多种属性。此外，复选框按钮还需要一个内部的图标来表示它的状态，这里使用了一个 SVG 图标来表示选中状态。
6. 总结
本文介绍了 Material Design 按钮的各种实现方法，包括基础按钮、浮动按钮、文字按钮、图标按钮和复选框按钮等多种样式。这些样式都具有 Material Design 的基本风格，可以用于开发移动设备和 Web 应用程序。如果你想学习更多关于 Material Design 的知识，可以参考 Material Design 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660259ded10417a222de608a