Material Design 是一种 Google 推出的设计语言，它强调平面化、简洁、直观、有层次感的设计风格。在 Material Design 中，Button 是非常重要的元素之一，因为它是用户与应用程序进行交互的主要方式之一。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格下的 Button 效果。
1. HTML 结构
首先，我们需要编写 HTML 结构。在 Material Design 中，Button 可以被分为三个部分：容器、文本和波纹效果。因此，我们可以将 HTML 结构分为三个部分：
<button class="md-button"> <span class="md-button-text">Button</span> <span class="md-button-ripple"></span> </button>
在这个 HTML 结构中，.md-button 是 Button 的容器，.md-button-text 是 Button 的文本，.md-button-ripple 是 Button 的波纹效果。
2. CSS 样式
接下来，我们需要编写 CSS 样式。在 Material Design 中，Button 有不同的状态：默认状态、悬停状态、聚焦状态、激活状态和禁用状态。因此，我们需要为每个状态编写不同的样式。
2.1 默认状态
在默认状态下，Button 的背景颜色为白色，字体颜色为黑色，没有阴影效果。
-- -------------------- ---- ------- ---------- - --------- --------- -------- ------------- -------- ----- ---- ---------- ---- ------------ ----- ---------------- ----- ------ ----- ----------------- ----- ------- ----- -------------- ---- ----------- ----- ------- -------- --------- ------- -
2.2 悬停状态
在悬停状态下，Button 的背景颜色变为淡灰色，字体颜色仍为黑色，没有阴影效果。
.md-button:hover {
background-color: #f5f5f5;
}2.3 聚焦状态
在聚焦状态下，Button 的背景颜色仍为白色，字体颜色仍为黑色，有一个淡蓝色的阴影效果。
.md-button:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.3);
}2.4 激活状态
在激活状态下，Button 的背景颜色变为深灰色，字体颜色仍为黑色，有一个深灰色的阴影效果。
.md-button:active {
background-color: #e0e0e0;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}2.5 禁用状态
在禁用状态下，Button 的背景颜色为灰色，字体颜色为淡灰色，没有阴影效果。
.md-button:disabled {
color: #9e9e9e;
background-color: #f5f5f5;
cursor: not-allowed;
}2.6 Button 文本样式
Button 的文本样式很简单，只需要设置字体大小和行高即可。
.md-button-text {
font-size: 1em;
line-height: 1.5;
}2.7 Button 波纹效果样式
Button 的波纹效果是通过伪元素 ::after 实现的。在点击 Button 时，会在 Button 上创建一个圆形的波纹效果。波纹效果的大小和位置与 Button 的大小和位置相同。
-- -------------------- ---- ------- ----------------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- -------------- ---- -------- -- ----------------- ------- -- -- ----- ---------- --------- ----------------- ------ ------- --------------- ----- - ----------------- ----------------- - -------- -- ---------- --------- ----------- --------- ----- ------- ----- -
3. JavaScript 交互
最后，我们需要编写 JavaScript 代码，使 Button 具有交互性。在 Material Design 中，Button 的波纹效果是非常重要的，因为它可以让用户感知到点击 Button 的反馈。因此，我们需要编写 JavaScript 代码来实现波纹效果。
-- -------------------- ---- -------
----- ------- - ----------------------------------------
---------------------- -- -
-------------------------------- ----- -- -
----- ------ - ------------------------------------------
----- ---- - -------------------------------
----- - - ------------- - ----------
----- - - ------------- - ---------
---------------- - ---------
----------------- - ---------
---
---在这个 JavaScript 代码中，我们首先获取所有的 Button 元素，然后为每个 Button 元素添加一个点击事件监听器。在点击事件中，我们获取 Button 的位置和大小，然后计算出波纹效果的位置，最后将波纹效果的位置设置为计算出的位置。
4. 示例代码
最后，这里是完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------------- ------ ---- ------ ------------
-------
---------- -
--------- ---------
-------- -------------
-------- ----- ----
---------- ----
------------ -----
---------------- -----
------ -----
----------------- -----
------- -----
-------------- ----
----------- -----
------- --------
--------- -------
-
---------------- -
----------------- --------
-
---------------- -
-------- -----
----------- - - - --- ------- ---- ---- -----
-
----------------- -
----------------- --------
----------- ----- - --- --- ------- -- -- ------
-
------------------- -
------ --------
----------------- --------
------- ------------
-
--------------- -
---------- ----
------------ ----
-
----------------- -
--------- ---------
---- --
----- --
------ -----
------- -----
-------------- ----
-------- --
----------------- ------- -- -- -----
---------- ---------
----------------- ------ -------
--------------- -----
-
----------------- ----------------- -
-------- --
---------- ---------
----------- --------- ----- ------- -----
-
--------
-------
------
------- ------------------
----- ----------------------------- --------
----- --------------------------------
---------
------- ----------------- ---------
----- ----------------------------- --------
----- --------------------------------
---------
------- ------------------
----- ----------------------------- --------
----- --------------------------------
---------
--------
----- ------- - ----------------------------------------
---------------------- -- -
-------------------------------- ----- -- -
----- ------ - ------------------------------------------
----- ---- - -------------------------------
----- - - ------------- - ----------
----- - - ------------- - ---------
---------------- - ---------
----------------- - ---------
---
---
---------
-------
-------结论
在本文中，我们介绍了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格下的 Button 效果。通过这个例子，我们可以学习到如何使用 CSS 样式实现不同状态下的 Button 效果，以及如何使用 JavaScript 实现 Button 的波纹效果。这些技术对于开发其他 Web 应用程序也非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6759057662956301acd4a302