在前端开发过程中，按钮是一个非常重要的 UI 元素，可以帮助用户进行各种操作，如提交表单、打开链接等。Material Design 是一种现代的设计语言，它提供了一套精美的 UI 元素库，其中包括 Material Button，本文就将详细讲解 Material Button 的使用。
Material Button 的基本介绍
先来简单介绍一下 Material Button。Material Button 是 Material Design 中的一个重要组件，它提供了多种不同的类型和样式，可以让开发者快速创建出美观的按钮。 Material Button 的主要特点包括：
- 凸起态和按下态的动画效果
- 批量和颜色的变化
- 能够与其他元素进行联动
下面将会对这些特性进行详细介绍。
Material Button 的使用方法
Material Button 是基于 HTML 和 CSS 实现的，需要使用到一些 CSS 类和 JavaScript 程序。下面我们将逐步介绍 Material Button 的使用方法。
基本按钮
首先是最简单的方法，只需要在 HTML 中定义一个按钮元素，然后添加 mdc-button 类即可：
<button class="mdc-button">Click me</button>
这里我们只是添加了基本的样式，还没有任何交互效果。如果需要添加凸起态和按下态的动画效果，需要添加 mdc-button--raised 类：
<button class="mdc-button mdc-button--raised">Click me</button>
此时点击按钮时，按钮会呈现出凸起的效果，非常有视觉冲击力。如果要去除凸起和阴影效果，只需要添加 mdc-button--unelevated 类即可：
<button class="mdc-button mdc-button--unelevated">Click me</button>
这样可以得到一个更加简洁的按钮样式。如果需要把按钮变成扁平样式，可以使用 mdc-button--outlined 类：
<button class="mdc-button mdc-button--outlined">Click me</button>
这种效果比较适合放在用户界面中，同时保持简洁和现代感。
按钮颜色
除了基本样式之外，Material Button 还支持多种不同的颜色，可以通过添加 mdc-button--${color} 类来实现。其中 ${color} 表示颜色名，下面列举了几种常用的颜色：
mdc-button--primary：主要颜色，通常是蓝色或者深紫色mdc-button--secondary：次要颜色，通常是橙色或者黄色mdc-button--accent：强调颜色，通常是红色或者粉色
例如，添加 mdc-button--primary 类可以把按钮颜色设置为主要颜色：
<button class="mdc-button mdc-button--raised mdc-button--primary">Click me</button>
类似的，我们也可以添加 mdc-button--secondary 和 mdc-button--accent 类来设置次要颜色和强调颜色。
按钮尺寸
Material Button 还支持多种不同的尺寸，可以通过添加 mdc-button--${size} 类来实现。其中 ${size} 表示尺寸名，下面列举了几种常用的尺寸：
mdc-button--small：小尺寸mdc-button--medium：中尺寸mdc-button--large：大尺寸
例如，添加 mdc-button--small 类可以把按钮尺寸设置为小尺寸：
<button class="mdc-button mdc-button--raised mdc-button--small">Click me</button>
通过调整尺寸，可以让按钮更加适应不同的布局和 UI 需求。
按钮联动
在实际应用中，按钮通常需要与其他元素进行联动，比如表单提交、页面跳转等。这时可以使用 JavaScript 来实现联动效果。在 Material Design 中，使用 mdc-button 类的元素需要实例化一个 MDCButton 对象，这个对象可以触发按钮的交互事件。下面是一个示例代码：
-- -------------------- ---- -------
------- ----------------- ------------------- -------------------- -----------
--------
------ - --------- - ---- ------------------- -- -- --------- -
----- -------- - ------------------------------------- -- ------
----- ------ - --- -------------------- -- --- --------- --
-- -------
---------------------------------- ------- -- -
-- ------------
------------- -----------
---
---------这里我们先把按钮实例化成一个 MDCRipple 对象，然后通过 buttonEl.addEventListener 方法添加了一个点击事件监听器。当按钮被点击时，会触发这个监听器，并执行里面的代码。
总结
本文详细介绍了 Material Button 的使用方法，包括基本样式、颜色、尺寸和联动等，同时也给出了示例代码。如果想要使用 Material Button，只需要按照上面的方法添加相应的 CSS 类和 JavaScript 程序即可。同时，Material Button 的动画效果和联动特性也为前端开发者提供了更多的创作空间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e987348841e9894b1e3b5