A rollover button is a dynamic Web button that changes appearance depending on the location of the user's mouse pointer. It contains three states: normal, over and down. The normal state appears when your mouse is off the button, the over state applies when your mouse rolls over the button, and the down state applies to when you click on the button.
Types and Uses
Video of the Day
Rollover buttons come in different shapes, sizes, colors and styles. Since images can be converted to rollover buttons, a rollover button can also contain images. A rollover button can be raised, sunken, flat or animated when a user clicks on it.
Video of the Day
Uses
Rollover buttons are used primarily as navigational buttons on a Web page to direct people to other locations. They are also used in drop-down and pop-up menus. Other rollover buttons are used for animated effects and sounds, so an image, color, shape, text or sound can change as the user rolls over the button on the Web.
Benefits
Rollover buttons extend the normal functionality of a button. Not only are they visually attractive, but rollover buttons are also dynamic, altering the user to the fact that they're active elements on the page. Web designers can add sound effects that will play if a user moves his mouse over these buttons. When used in drop-down or pop-up menus, rollover buttons help save navigational space.
Suggested Size
The file size of a rollover button should be small. Since rollover buttons are images, they can quickly take up extra space on the Web server and increase loading time.
Related Programs
A rollover button can be created with image-editing software, such as Adobe Photoshop, Image Ready, Flash and Fireworks. Web-editing software programs like Dreamweaver and Microsoft Visual Studio Developer can also be used to create rollover button effects. A rollover button can also be hard-coded into a Web file with JavaScript or CSS or by using online rollover button generators.