波纹效果

波纹效果是一个外部库，主要用于实现 Material Design 中的点击效果。

应用波纹效果

给按钮添加波纹效果，你只要将 waves-effect 类放到按钮中。如果你想这个波纹效果更白，增加 waves-effect waves-light 作为按钮的类。

<a class="waves-effect waves-light btn-large" href="#">Wave</a>

自定义

这里有一些方法可以自定义波纹效果，您可以使用预创建的类，也可以通过创建一个新类来定义自己的颜色

可用的颜色

要使用这些，只需添加相应的类到您的按钮。玩转按钮背景颜色的改变和波纹效果的应用来创建更酷的东西。

<a href="#!" class="btn waves-effect waves-teal">Send</a>

自定义颜色

如果你想要的颜色已经不可用，您可以轻松地创建自己的波纹效果通过创建一个自定义的 CSS 类，看看下面的例子，我们添加了一个波浪棕色效果。

/*
    When creating your CSS selector,
    change "brown" to something of your choosing
    */
    .waves-effect.waves-brown .waves-ripple {
     /* The alpha value allows the text and background color
     of the button to still show through. */
background-color: rgba(121, 85, 72, 0.65);
}

圆形

如果你想应用一个波纹效果到非矩形的元素中，这里一个选项是关于圆形波纹效果的。除了要增加 waves-effect 类，还要增加 waves-circle 类。

HTML 标记

<a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
  <i class="material-icons">add</i>
</a>