Material Design 是谷歌公司为移动端和 Web 应用提供的一套视觉设计语言，旨在为用户创造简洁、直观、稳定的使用体验。其中，Material 按钮是 Material Design 样式中最常用、最直观的元素之一。本文将介绍如何在前端应用中使用 Material 按钮，以提高用户操作体验。
实现 Material 按钮
Material 按钮的样式包括背景、文本颜色、边框和阴影等，可以通过 CSS 样式实现。以下是按钮的基本样式：
-- -------------------- ---- -------
---------------- -
-------- -------------
-------- ---- -----
-------------- ----
----------------- --------
------ -----
---------- -----
------------ ----
--------------- ------
--------------- ----------
----------- -------
------- --------
----------- - --- --- - ------- -- -- ------
- --- --- - ------- -- -- ------
- --- --- ---- ------- -- -- -----
-其中，background-color 控制按钮背景色，color 控制文本颜色，box-shadow 控制阴影效果。
在 HTML 中使用 Material 按钮非常简单，只需要在按钮元素上添加 class=“material-button” 即可。示例如下：
<button class="material-button">提交</button>
Material 按钮的交互效果
Material 按钮不仅有着优秀的样式，还有着流畅自然的交互效果。通过 JavaScript，我们可以为按钮添加点击反馈、聚焦效果和按下效果等动画效果，从而提高用户体验。
以下是 Material 按钮的基本交互效果：
-- -------------------- ---- ------- ---------------------- - -------- ----- - ---------------------- - ----------------- -------- - ----------------------- - ----------------- -------- -
其中，outline:none 控制聚焦效果，hover 控制悬停效果，active 控制按下效果。
为了添加点击反馈效果，我们需要为按钮元素添加一个隐藏的 DOM 元素作为反馈元素，然后为按钮添加鼠标点击事件。
-- -------------------- ---- -------
----------------------- -
--------- ---------
-------------- ----
----------------- --------- ---- ---- -----
---------- ---------
--------------- -----
-
----------------------- ----------------------- -
---------- ------ ---- -------
-
---------- ------ -
---- -
-------- --
---------- -----------
-
-其中，position 控制元素定位，background-color 控制背景色和不透明度，transform 控制元素缩放，animation 控制动画效果。要让点击反馈效果与按钮同步，我们还需要为按钮元素添加 position:relative 属性。
<button class="material-button"> 提交 <div class="material-button-effect"></div> </button>
-- -------------------- ---- -------
--- ------ - -------------------------------------------
-------------------------------- -------- --- -
--- ------ - ----------------------------------------------
--- --- - -----------------------------
--- - - ------- - -------- - -------------------
--- - - ------- - ------- - -------------------
------------------ - ------------------- - ------------------- ----------- - -----
----------------- - - - ------------------ - - - -----
---------------- - - - ------------------- - - - -----
---------------------- - -----------
-----------------
---------------------- - -----------
---其中，getBoundingClientRect() 方法获取按钮的位置和大小等信息，pageXOffset 和 pageYOffset 计算页面滚动距离，offsetWidth 和 offsetHeight 获取元素的宽度和高度。
总结
本文介绍了如何使用 CSS 和 JavaScript 实现 Material 按钮，并为按钮添加流畅自然的交互效果，以提高用户操作体验。通过 Material Design 的设计原则，我们可以更好地为移动端和 Web 应用创建直观、稳定的使用体验。
完整示例代码：https://codepen.io/siyuan13/pen/WNjYomO
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb86705ad90b6d0420f6dd