Fun With Hover.css

What good is a button if it doesn't have a cool hover effect.

Well that's where hover.css comes in.

Hover.css is a collection of CSS3 powered hover effects that can be applied to links, buttons, logos, SVG or featured images. To get started with hover.css you first need to download from here. You can also view the examples to see what each effect looks like.

How to add them to your site

There are a couple ways you could add the hover.css  to your site. The first is you ftp the hover.css file to your server and link to it if you are capable of doing this way (further directions can be found here). The other way is to use the hover.css  file I have hosted on google drive. To do so all you would need to do is copy and paste this in your scripts pagelines > settings > advanced:

<link href='//8ad9530065ba68185eea3a8b328d1e9c278ad21a.googledrive.com
/host/0B1ZjzU15tGGbUXdJRjZlS0VfbEU/hover.css' rel='stylesheet' type='text/css'>

You can view the file here.

Once you hover.css installed  it becomes pretty simple to call the effects. All the classes start with .hvr  so if you use the demo page as a reference and you want to include lets say the shrink effect you would simply add  .hvr-shrink  as a class to your elements. Here are some other examples:

.hvr-pulse-grow
.hvr-wobble-horizontal
.hvr-wobble-skew
.hvr-shutter-out-vertical

Effects overview

This is a brief overview of the best usage for some of the effects but you are free to use them how ever you see fit.

2D Transitions:

Best used buttons/links that you create with html. They can also be used for image and boxes section.

Background Transitions:

These are great if you are making use of the embed section and marking up something custom. I didn't see much use for these with any other section.

Icons:

I didn't find a use or reason to even use this part of hover.css.

Border Transitions:

Perfect for menu items or custom buttons written with html.

Shadow & Grow Transitions:

Some of these may be good for the boxes section, image sections or buttons.

These are just my recommendations  if you see or find another use for something let me know in the comments. I hope this was useful to some one.

- Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Fun With Hover.css

Published on by | Add Comment

What good is a button if it doesn't have a cool hover effect.

Well that's where hover.css comes in.

Hover.css is a collection of CSS3 powered hover effects that can be applied to links, buttons, logos, SVG or featured images. To get started with hover.css you first need to download from here. You can also view the examples to see what each effect looks like.

How to add them to your site

There are a couple ways you could add the hover.css  to your site. The first is you ftp the hover.css file to your server and link to it if you are capable of doing this way (further directions can be found here). The other way is to use the hover.css  file I have hosted on google drive. To do so all you would need to do is copy and paste this in your scripts pagelines > settings > advanced:

<link href='//8ad9530065ba68185eea3a8b328d1e9c278ad21a.googledrive.com
/host/0B1ZjzU15tGGbUXdJRjZlS0VfbEU/hover.css' rel='stylesheet' type='text/css'>

You can view the file here.

Once you hover.css installed  it becomes pretty simple to call the effects. All the classes start with .hvr  so if you use the demo page as a reference and you want to include lets say the shrink effect you would simply add  .hvr-shrink  as a class to your elements. Here are some other examples:

.hvr-pulse-grow
.hvr-wobble-horizontal
.hvr-wobble-skew
.hvr-shutter-out-vertical

Effects overview

This is a brief overview of the best usage for some of the effects but you are free to use them how ever you see fit.

2D Transitions:

Best used buttons/links that you create with html. They can also be used for image and boxes section.

Background Transitions:

These are great if you are making use of the embed section and marking up something custom. I didn't see much use for these with any other section.

Icons:

I didn't find a use or reason to even use this part of hover.css.

Border Transitions:

Perfect for menu items or custom buttons written with html.

Shadow & Grow Transitions:

Some of these may be good for the boxes section, image sections or buttons.

These are just my recommendations  if you see or find another use for something let me know in the comments. I hope this was useful to some one.

- Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match