Using effects with the button hover state

The button widget utilizes the various states found in the jQuery UI theme framework. For example, when the user hovers over a button widget, this event triggers a handler inside the button widget that applies the ui-state-hover class to the element, changing its appearance. Likewise, when the mouse leaves the widget, a different handler removes that class.

This default functionality of the button widget works fine—it just uses the addClass() and removeClass() jQuery functions to apply the hover class. As the user moves around and considers what he/she wants to do next, the mouse is likely to move in and out of button widgets; this is where we tweak the experience by providing the user with some subtle effects.

Getting ready

For this example, we'll just create three simple button elements that will serve as the button widgets. This way, we can experiment with moving the mouse pointer over several buttons.

<div>
    <button>Button 1</button...