!!! Note: This works only in HTML 5 compatible browsers!!!
Examples
Click image to view Live Demo
Back to top
Plugin settings
| Setting name | Description | Available values | Default value | Example <selector> ($(".wwbuttons>a")) + code |
| animationSpeed | Speed of buttons hover animation (same setting as jQuery) | "fast", "normal", "slow", 100, ... | "fast" | .wwbutton({ animationSpeed: "slow" }); |
| animationSize | Number of pixels for button animation | any number (including negative) | 12 | .wwbutton({ animationSize: 15 }); |
| Opacity settings | ||||
| normal | Opacity level for normal button state | value from 0.0 to 1.0 | 0.8 | .wwbutton({ opacity: { normal:1, hover: 0.45, disabled: 0.05 }}); |
| hover | Opacity level for hover button state | 1 | ||
| disabled | Opacity level for disabled buttons | 0.2 | ||
Events
| Event name | Description | Example <selector> ($(".wwbuttons>a")) + code |
| over | Callback function that is called after mouseover animation stops | .wwbutton({ over: function(){ alert('mouse over'); }}); |
| out | Callback function that is called after mouseout animation stops | .wwbutton({ out: function(){ alert('mouse out'); }}); |
| click | Custom click event | .wwbutton({ click: function(){ alert('button clicked'); }}); |
Methods
| Method name | Description | Example <selector> ($(".wwbuttons>a")) + code |
| toggle | Enables/Disables button. Pass true as second argument to enable or false to disable. | .wwbutton('toggle', true); |
Back to top
Like this article?
Tweet
