WordPress CSS3 Hover Transitions

In my last two articles I focused on How to use JQuery with WordPress and how to Use the Dollar Sign in WordPress instead of jQuery. These articles gave you jQuery techniques to use with WordPress. Today I am going to show you a super simple, super helpful tool to accomplish some really fancy css3 hover transitions in the websites you build. You won’t believe how simple it is to implement and use!

How To Use CSS3 Hover Transitions

Front-end developer Ian Lunn created a simple css library called hover.css. This file, when either linked to your site in the header or copied into your existing style sheet, automatically gives you the ability to add over 30 different transitions to use on elements in your websites. Once you have the css3 hover transitions linked, choose whichever animation you like best and remember it’s name. Next you add that class name to the element you want to apply it to. In addition, you must always apply the standard “button” class to make the transitions work correctly. Here is an example of the code and how it looks:

<a href="#" class="button buzz-out">EXAMPLE</a>
EXAMPLE

To see a demo, download the file, or read a full tutorial click here

Why Use CSS3 Hover Transitions?

These transitions can take your website from being “nice” to being outstanding! The internet is full of movement and interactivity and if you don’t have these types of things on the websites you are building then you are already behind your competition. CSS3 brought us some very powerful tools to accomplish movement and animation without having to rely on another coding language like javascript. Ian Lunn took this concept one step further by creating this css library for you to quickly add movement and interactivity without slowing down your workflow. Can I get an amen! Without having to memorize keyframes and transition names, we as developers can add cool functionality to our websites. I will challenge you, however, to look through his hard work and see how these transitions work so you can continue to grow as a developer.

I Want To See Your Work

These classes look like they were created for hover states on buttons but if harnessed and modified could probably work for other elements as well. I have begun to play with some of these css3 hover transitions in my own work and would be interested in hearing from you guys on how you used them in your projects! Connect with me on one of the above social platforms and tell/show me your fancy projects.