100
Lost something?
Who writes here?

Arian Simon

Web Designer - Business Owner - Entrepreneur who makes happy little mistakes.

Read more about me

BLOG POST

Epic CSS Button Hover Effects For Your Website

After image hover effects in my last post I’ll show you some css button hover effects this time. As last time feel free to steal them right now.

CSS Button Hover Tutorial

If you have read my last post you already know how this stuff works. Here is a short reminder.

To add a hover effect to an element you need the :hover selector. You add it to your element in your cascading style sheet (styles.css in WordPress). An introduction to CSS can be found in this post. This is a typical css button hover effect:

Define every change on hover for this element inside. Additionally you can smooth out the transition between the states (non-hover to hover and vice versa). Simply add following code to your image element (more on transitions can be found here):

If you want to be 100% sure your effects work even in older browser versions you can add following code:

All” declares that this transition is used for all property state changes.

Five Simple To Epic CSS Button Hover Effects

Feel free to use these effects right now on your own website. Or experiment a little and create your own unique button hover styles in css. Effects go from simple to more complex. To create a button simply put an html link into place:

The styles I used for this tutorial:

CSS Button Hover Effect 1 (Simple)

A simple background color change button.

Hover Me

CSS Button Hover Effect 2 (Cool)

A glow effect for your button. Use the hexcolortool to correctly lighten your color.

Hover Me

CSS Button Hover Effect 3 (Pretty)

Play with letter-spacing and border-radius.

Hover Me

CSS Button Hover Effect 4 (Amazing)

Use :before and :after selectors to create an outstanding button.

Hover Me

CSS Button Hover Effect 5 (Epic)

Tricky and with Wow Factor.

Hover Me

Use Them For Your Own Website

With a little time investment you can also create your own unique button styles. I’m sure they will catch your visitors’ eyes.

Cheers,
Arian

Leave a Reply

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

Pin It on Pinterest