Fork me on GitHub

Hover.css v2

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

Download on GitHub

2D Transitions

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward

Background Transitions

Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

Icons

Demo font icons courtesy of FontAwesome. How to use icons with Hover.css. Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out

Border Transitions

Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right

Shadow and Glow Transitions

Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset

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, Sass, and LESS flavours.

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.

Licenses

Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license.

Personal/Open Source

For personal/open source use, Hover.css is made available under a MIT license:

Use in unlimited personal applications
Your application can't be sold
Your modifications remain open-source
Free updates

Read full license

Commercial

For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.

Commercial License

Use in 1 application
Sell your application once only (e.g. a website sold to a client)
Your code is kept proprietary, to yourself
Free updates to the major version

Purchase | Read full license

Extended Commercial License

Use in unlimited applications
Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
Your code is kept proprietary, to yourself
Free updates to the major version

*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.

Purchase | Read full license

Hover.css
Commercial
License

For 1 Project

$14

Hover.css
Extended Commercial
License

For Unlimited Projects

$18

OEM Commercial License

Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited's software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please contact us for more information about the OEM Commercial License.

MIT License (Pre v2.2.0 / 24th March 2017)

Hover.css was previously made available under a MIT License for both commercial and non-commercial use. Anyone that obtained a MIT license for commercial use before v2.2.0 (24th March 2017) may continue to use Hover.css versions prior to v2.2.0 under that same license.

If you'd like to upgrade to v2.2.0 or above, or would like to simply show your support for Hover.css (we'd much appreciate it!), please purchase an up-to-date commercial license. Commercial License.

Hover.css is now available as an Eager App

Quickly and easily install Hover.css on your WordPress site or via an embed code with Eager app.