How to create a rollover effect in CSS
If you remember how rollover images work, they are essentially two images that swap with each other depending on whether the cursor is hovering over them. We can create a similar effect in CSS through the use of the <a> tag’s pseudo-classes.
A link can have the following pseudo-classes:
- a:hover - indicates the mouse pointer is over the link
- a:visited - indicates the link has been visited
- a:active - indicates the link is active (e.g, the user has clicked down on it)
By using traditional CSS properties “colors” and “text-decoration” in the link tag’s pseudo-classes (shown below), we can create the same visual effect of rollover images.
CSS LinksWashingtonPost.com Webucator Google
Note that order matters. If a:active precedes a:hover, the effects in a:hover will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.
By using even more properties, such as padding, margin, and border, it is possible to create links that look like buttons, something you would normally need images for. The following example illustrates this.
The screenshots below show how these CSS buttons look in different states: the default state, the hover state, and the active state.