- Overview
- Documents
MAWButton is a ripple button inspired by Google material design.
Browser Support
Modern browser like Chrome, Safari, FireFox...etc.
Source: github.com
Jul 17, 2014 in Animation 3945 views
MAWButton is a ripple button inspired by Google material design.
Browser Support
Modern browser like Chrome, Safari, FireFox...etc.
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/mawbutton.css"/> <script type="text/javascript" src="js/vendor/jquery.js"></script> <script type="text/javascript" src="js/mawbutton.js"></script>
2. HTML
<button>Click Me</button> <button class="green">Click Me</button> <button class="blue">Click Me</button> <button class="red">Click Me</button>
3. JAVASCRIPT
$('button').mawbutton({
speed : 250,
scale : 6,
effect : "ripple",
transitionEnd:function(){
console.log('end');
}
});
4. OPTIONS
| Option | Default | Type | Description |
|---|---|---|---|
| speed | 300 | int | The duration which are given in milliseconds of effect. |
| scale | 3 | int | The size how the ripple will scale to in animation. |
| effect | ripple | string | Determine which effect you want to use. |
| transitionEnd | function(){} | function | Callback after transition end. |
5. EFFECTS
| Name | Effect |
|---|---|
| ripple | Basically effect like the Google material design. |
| flash | Still working on it. |
| wave | Still working on it. |
Tagged with:
mawbutton
ripple button inspired
button
material design
google material design
ripple button
Related Articles
JS Tutorial