介绍
波纹效果应用波纹效果
给按钮添加波纹效果,你只要将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);
}