Quick search results

No results found
Search
Last active 2 days ago
News about
23 Blogs
Tom King (Works at )
Avaible for freelance work
F
on Facebook
View website
T
on Twitter
View website
G
Google+
View website

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sunt in culpa qui quis.

Yesterday, 4:56 PM

Sunt in culpa qui officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum officia deserunt mollit anim

27 January 2016
Waves
Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design
Applying Waves

To put the waves effect on buttons, you just have to put the class waves-effect on to the buttons. If you want the waves effect to be white instead, add both waves-effect waves-light as classes.


Wave
Circle

If you want waves to form to a non rectangular shape, there is an option for circular waves. Just add the waves-circle in addition to waves-effect


add
Custom Colors

If the color you want is not already available, you can easily make your own waves color by creating a custom CSS class. Take a look at the example below where we add a waves-brown effect


/*
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);
}
Available Colors

To use these, just add the corresponding class to your button. Play around with changing the background color of butons and the waves effect to create something cool!


<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