波浪特效



介绍

波浪特效是一个外部库,主要用来实现Material Design中的点击效果。

点我

使用ti

在按钮上添加一个waves-effectclass就能使用这个特效。如果要用白背景则使用waves-effect waves-light


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

自定义

框架中已经提供了数种样式,当然你也可以自定义class来使用。

颜色

使用相应的class即可。


  <a href="#!" class="btn waves-effect waves-teal">Send</a>
          
DefaultSend
waves-lightSend
waves-redSend
waves-yellowSend
waves-orangeSend
waves-purpleSend
waves-greenSend
waves-tealSend
自定义

如果已有的class颜色不能满足你,那么你也可以自定义颜色,看下面的例子。


 /*
 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-circle之后再添加waves-effect

HTML

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