Waves

Click effect inspired by Google's Material Design

v0.5.2

Waves on buttons

Flat buttons (show source)

{{#code class="lang-markup"}} Button A {{/code}}

Button A

Float buttons (show source)

{{#code class="lang-markup"}} Button A {{/code}}

Button A

Waves on icons

Plain Icons (show source)

{{#code class="lang-markup"}} {{/code}}

Colored Icons (show source)

{{#code class="lang-markup"}} {{/code}}

Waves on others

DIVs (show source)

{{#code class="lang-markup"}}
Plain Box
Colored Box
Raised Box

{{/code}}
Plain Box
Colored Box
Raised Box

Images (show source)

{{#code class="lang-markup"}} {{/code}}

Image Source: © Moyan Brenn. Flickr

Image Source: © Agustin Rafael Reyes. Flickr

Getting Started

It's easy to use Waves. Download the latest version of Waves from Github repository. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use!

{{#code class="lang-markup"}} Waves example Click Here {{/code}}

Advanced:
Waves also provide LESS, SCSS, and SASS source. So, feel free to used it :)

To put Waves effect on your buttons, just add .waves-effect and .waves-button class to your buttons.

{{#code class="lang-markup"}} A Tag {{/code}}

Normally, the effect will not work on single tag element like <input>. That's why Waves will wrap <input> inside <i> automatically if you display the effect.

{{#code class="lang-markup"}} {{/code}}

Waves can also be applied with icons (like FontAwesome) by using waves-circle, so you can give the icons Waves effect. It's simple, just give additional .waves-effect and .waves-circle class to your <i> tags and Waves will wrap icon inside circle spot that will prevent Waves effect spreading.

{{#code class="lang-markup"}} {{/code}}

You can also give Waves effect to other element tag like <div> or <img>. All you need to do is just put .waves-effect class. For element that not have closing tag like <img>, you have to wrap it inside <span>, and for element that have blocky display like <div>, you need to put .waves-block class to keep its shape.

{{#code class="lang-markup"}}
Block A
{{/code}}

Styling

Waves give you capabilities to color your .waves-effect. You can do this by set up the color and background-color/background properties on your element style (or CSS file).

{{#code class="lang-markup"}} {{/code}}

By default, Waves ripple is darker. If you want the ripple is lighter, you can set .waves-light along side .waves-effect class. Make sure the element has been colored, because if it haven't colored yet, you cannot see the light ripple.

{{#code class="lang-markup"}} {{/code}}

Not only give your "Waves effect", Waves also provide float effect when you click an element by adding .waves-float class to the element. Once again, before put float effect, your have to make sure the element has been colored, to prevent weird shadow on the element.

{{#code class="lang-markup"}} {{/code}}

API

displayEffect(config)

Arguments

{{#code class="lang-javascript"}} { // How long Waves effect duration // when its clicked (in milisecond) duration: 500 } {{/code}}

FAQ

Browser support?

Waves works in latest modern browser (i.e. Chrome, Firefox, Opera and Safari) and also IE10+. More browser support will comming.

Can I make Waves better?

Yes, we strongly encourage you to contribute to make Waves better. So, if you find a bug, or have nice idea for Waves development, please mention us.

Quick Fix

IE Tap highlight on Windows Phone

By default if you access a web page using IE in Windows Phone, you will get tap highlight effect when you tapping a link or button and this highlight will shadowed Waves effect. To prevent this thing happen, you will need to add msapplication-tap-highlight meta tag on your header.

{{#code class="lang-markup"}} Your Web Page {{/code}}
Fork me on GitHub