Hover.css

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

Fork me on GitHub

Download on GitHub

2D Transforms

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Rotate Grow Rotate Float Sink Hover Hang Skew Skew Forward Wobble Horizontal Wobble Vertical Wobble Top Wobble Bottom

Border Transitions

Border Fade Hollow Trim Outline Outward Outline Inward Round Corners

Shadow and Glow Transitions

Glow Box Shadow Outset Box Shadow Inset Float Shadow Hover Shadow Shadow Radial

Speech Bubbles

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

Curls

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left

About Hover.css

All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours.

For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ.

Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.

License

hover.css is open source, and made available under a MIT License. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.

Placing author information in your stylesheet, credits page or humans.txt is much appreciated.

I tweet about web technologies such as CSS3, HTML5 and JavaScript

Created by Ian Lunn - Front End Web Developer