- 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 3640 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