With CSS3, we’re given endless options to animate just about anything. From buttons that fade to buttons that transform into a new shape, content that fades in to content that swings in from the side of the page. Animations can range from subtle to dramatic. As fun as it is to experiment with all of these animations, its good to remember that an animation, like web design in general, is not to entertain, or just look cool. The best animations not only are visually engaging, but meaningful as well, and help users understand why they should click on the button.
For Example
For example, a “next article” button could have an arrow icon emerge to the right of the button, imitating the meaning of “next” in visual space. A delete icon could empty of color, signifying content being deleted. A button reading “Add to Cart” could be replaced by a cart icon on hover.
These effects are beautiful AND helpful, guiding the user through interactions on your website.
The Inspiration
I was particularly inspired by a demo showcased on codrops, a web design and development blog. Take a look, hovering over each button. Many of the buttons (especially in the green and purple sections) have both beauty and usefulness.
But wait…what about mobile? And old browsers? Hover effects just don’t work (yet) on mobile devices. While playing around with these buttons, I still have to remember to make the initial view/state of the button all the user needs to know, while the hover states provide extra, helpful, but non-essential information. But it sure would be cool if phones had hover-sensors. Think of how touches hand motions could transform the mobile web experience…
Looking for More?
If you’re looking for more inspiration on animations, effects, and ideas for links and buttons, check out the links below: