Download the latest version of Waves from Github repository. You can also install it via Bower with bower install waves or via npm with npm install node-waves. Include waves.min.css and waves.min.js to your HTML file and Waves is ready to use!
<!DOCTYPE html>
<html>
<head>
<title>Waves example</title>
<link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />
</head>
<body>
<a href="#" class="button">Click Here</a>
<script type="text/javascript" src="/path/to/waves.min.js"></script>
</body>
</html>
Advanced:
Waves also provide LESS, SCSS, and SASS source. So, feel free to used it :)
Attach the effect
To attach Waves's effect (or we usually called it as "the ripple") to HTML element, you can use Waves.attach()
<a href="#" class="button">Click Here</a>
<script type="text/javascript">
Waves.attach('.button');
</script>
Waves.attach() comes with 2 parameters, the first is DOM element that you want to be attached (or string that represent it, like jQuery), and the second one is array of CSS classes that will be put on the element.
<a href="#" class="button">Click Here</a>
<script type="text/javascript">
Waves.attach('.button', ['waves-button', 'waves-float']);
</script>
Initialize
After you attach Waves to your HTML element, you can initialize Waves with Waves.init() to start the effect. You can also configure Waves by passing option parameter on Waves.init(). Please see API page for further information.
<a href="#" class="button">Click Here</a>
<script type="text/javascript">
Waves.attach('.button', ['waves-button', 'waves-float']);
Waves.init();
</script>
Waves is designed to be flexible. It means you still be able to attach the effect to another element after Waves.init().
<a href="#" class="button">Click Here</a>
<script type="text/javascript">
// This is ok.
Waves.init();
Waves.attach('.button', ['waves-button', 'waves-float']);
</script>
Helper classes
In a couple examples above, you already see some Waves classes on Waves.attach(). Waves provide several classes to help you styling your effect. Here we go.
-
.waves-button for semi-rounded button style.
-
.waves-float for float effect when the element is clicked.
-
.waves-circle for circle (rounded) style.
-
.waves-block for adding display: block; to element.
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.
<!DOCTYPE html>
<html>
<head>
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no"/>
<title>Your Web Page</title>
<link rel="stylesheet" type="text/css" href="/path/to/waves.css" />
</head>
<body>
<script type="text/javascript" src="/path/to/waves.js">\</script\>
<script type="text/javascript">
Waves.init();
</script>
</body>
</html>
