介绍
波纹效果应用波纹效果
波浪效应可以应用于任何元素。要在按钮上设置波浪效果,只需在按钮上添加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">发送</a>
自定义颜色
如果你想要的颜色还不可用,你可以通过创建一个自定义的CSS类来轻松地制作你自己的波纹效果色。看看下面的例子,我们在其中添加了波纹棕色效果。
/*
创建CSS选择器时,
将“brown”改为您选择的颜色
*/
.waves-effect.waves-brown .waves-ripple {
/* 按钮的背景色和文本色支持alpha值*/
background-color: rgba(121, 85, 72, 0.65);
}