Interactive UI elements can have different states that need to be communicated to the user. For example links change their styling on hover to tell the user that they have reached their mouse target and can now click on the element.
For image buttons or links this is normally done by putting several image states into one sprite image that contains hover and active states below the default state.
However, this means we can’t use CSS to animate the icons and the only way to edit the hover state is to edit the image file.
CSS transitions and inline SVGs make it easy to animate the colors when the user hovers over the icon.
Below is an example from the Shufflehub website. On hover on a category icon the line color changes from black to turquoise.
You can see that the color fades gradually as the user begins to hover over the icon.
Implementing the icon state changes
Using inline SVGs
First of all we need some SVGs. SVGs are vector files, so rather than declaring pixel colors they list a bunch of elements and their attributes.
They look very similar to normal HTML:
We don’t want to use an image tag but instead but the SVG code directly into our HTML document. This is the result (try it on jsFiddle):
Updating icon styles on hover
For the most part we can style the SVG elements in the same way as normal HTML elements.
This CSS code adds a hover style. We identify the element’s tag name and then specify what properties we want to update (fill and stroke respectively).
The icon is then highlighted when the user hovers over it.
If you only want to restyle parts of the SVG you can do that by adding classes to the SVG elements and singling them out them in the CSS selector.
Animating the color transition
Like with other styling we can add a transition to the changed CSS of the SVG image.
The code above acts as a catch all: every element inside the svg will be animated and all CSS properties will be updated gradually. In practice that means we don’t have to specify the type of SVG component (poloygon, circle, …) in the inline SVG or what the respective properties are (stroke and fill).
Now when you start hovering on the icon the color animates towards the green value. Try out the end result.