在 Material Design 风格下，Button 长按后会出现一个类似于水波纹的效果，这种效果在用户交互中起到了很好的作用，但是有些情况下我们希望自定义这种效果，比如更改颜色、形状等，本文将介绍如何通过自定义样式来解决这个问题。
实现思路
在 Material Design 中，Button 长按后的效果是通过在 Button 上添加一个波纹元素来实现的，因此我们可以通过修改这个波纹元素的样式来实现自定义效果。
具体来说，我们可以通过 CSS 中的 :before 伪元素来实现这个波纹元素，并通过 transform 属性来控制其形状和大小。同时，我们可以通过 background-color 属性来控制波纹的颜色。
示例代码
下面是一个示例代码，通过在 Button 上添加一个 :before 伪元素来实现自定义波纹效果：
<button class="custom-button">Custom Button</button>
-- -------------------- ---- ------- -------------- - --------- --------- -------- ------------- -------- ---- ----- ---------- ----- ------------ ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- - --------------------- - -------- --- --------- --------- ---- ---- ----- ---- ---------- --------------- ----- --------- ------ ----- ------- ----- -------------- ---- ----------------- --------- ---- ---- ----- -------- -- ----------- --------- ---- --------- ------- ---- --------- - ---------------------------- - ---------- --------------- ----- --------- -------- -- ----------- --------- ---- -------- ------- ---- -------- -
在上面的代码中，我们首先给 Button 添加了一个 position: relative 的样式，这是因为我们要在其上添加一个绝对定位的 :before 元素。
接着，我们通过 transform 属性将 :before 元素的位置设置为 Button 的中心，并将其大小设置为 0。同时，我们将其背景颜色设置为半透明白色，并将其透明度设置为 0。这样 :before 元素就成为了一个类似于水波纹的效果。
最后，我们通过 :active 伪类来控制 :before 元素的大小和透明度，从而实现了自定义的长按效果。
总结
通过自定义样式，我们可以很容易地实现自己想要的 Button 长按效果。此外，我们还可以通过修改 :before 元素的样式来实现其他的效果，比如更改形状、颜色等。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6627a078c9431a720c450600