Waves is a Click effect inspired by Google’s material design.
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!
<!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="waves-effect waves-button">Click Here</a>
<script type="text/javascript" src="/path/to/waves.min.js"></script>
<script type="text/javascript">
Waves.displayEffect();
</script>
</body>
</html>
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-buttonclass to your buttons.
<button class="waves-effect waves-button">Click Here</button>
<!-- It also support a, input submit and input button tag -->
<a href="#" class="waves-effect waves-button">A Tag</a>
<input type="submit" class="waves-effect waves-button" value="Input Submit">
<input type="button" class="waves-effect waves-button" value="Input Button">
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.
<!-- Before displaying the effect -->
<input class="waves-button-input" type="submit" value="Button C">
<!-- After displaying the effect -->
<i class="waves-effect waves-button waves-input-wrapper" style="width:85px;height:36px;">
<input class="waves-button-input" type="submit" value="Button C">
</i>
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.
<i class="fa fa-gear waves-effect waves-circle"></i>
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.
<!-- For single tag element -->
<span class="waves-effect">
<img src="/path/to/images.jpg">
</span>
<!-- For blocky display to keep its shape -->
<div class="waves-effect waves-block">
Block A
</div>
Waves : Click effect Inspired by Google’s Material Design
No comments:
Post a Comment