Let me test my psychic powers for a second.

I bet the last time you created a CSS hover effect for a button on your site, you flipped the colour of the text with the colour of the background and used a transition of somewhere between 0.3 and 0.5 seconds.

Am I right? Do you feel seen?

Even if not, would you agree that this is the most common way to create CSS hover animations for buttons? I'm not knocking it - I've done it many times myself. It works.

But... there are plenty of other ways you can animate your buttons with CSS, which could make your site more fun and help it stand out from the crowd.

So let's explore some other options!

CSS button gradient effects

At the time I'm writing this, you can't animate gradients with CSS - at least, not directly. There is, however, a way to trick CSS into doing what we want - we just make the background larger than the button, and move the background on hover. The result is an animated gradient effect on your buttons.

Here are a few examples - you can take one of these and change the gradient colours and angle if you want:

See the Pen on CodePen.

You can also create an animated gradient effect around the border, instead of the background. Or both:

See the Pen on CodePen.

CSS button hover effects using box shadow

Remember when you were a kid, and you drew a rectangle, then you added a little shading around two edges to make it look kinda 3D? Well CSS box-shadow does that:

See the Pen on CodePen.

But, box-shadow gives us a lot of control of how the shadow appears:

  • How big should the shadow be?
  • How far from the box?
  • What colour?
  • Multiple shadows, or just one?
  • Inside the box, or outside?
  • Solid shadow, or blurry?

And, we can animate all of this! Here are some creative ideas on how you can use box-shadow in your button hover effects:

See the Pen on CodePen.

Check out Mozilla's article on box-shadow to learn more.

Expanding CSS button hover effect

Here's a unique hover effect that might be useful to you:

See the Pen on CodePen.

It looks like a text link with a little icon next to it, but looks can be deceiving - the whole thing is actually the button. When you hover, the icon expands and spreads over the text. Very nice!

CSS button on hover fill effects

As I said earlier, the most common button hover effect has to be a simple fill - simply flipping the background colour and the text colour, usually with a fade-in of half a second or so. To be fair, there's a reason this is common - it does the job and does it well. But that doesn't mean you can't get creative with it.

There are lots of ways you can do create the fill effect besides a fade. You could have the background spread out from the centre, slide it in from the side, or spin it around and lock it into place, just to name three. Here are a few ways you could mix it up a bit:

See the Pen on CodePen.

3D rotating button effect on hover with CSS only

You might have seen these 3D rotating buttons before. This one is particularly cool because it's done purely in CSS, and because it has two "cubes" that rotate in different directions (although you could just get rid of the second one if you don't want it).

Here's how it looks:

See the Pen on CodePen.

Note that you'll need to change the data-attr and the text within the span to change the text shown.

Apple style swipe effect on hover

These buttons visually mimic the effect on iOS when you swipe a menu item (e.g., a note in your Notes app) to make the buttons appear. Here though, it's just a visual effect - you don't have to click on the green bit that slides in, you can click any part of it:

See the Pen on CodePen.

The cool thing about these is you can give the visitor an additional call to action (though personally, I'd have used red instead of green for the cancel button).

CSS Button hover background change

OK, time to think outside the box.

I mean that literally - why not have our CSS button's hover effect change something other than the actual button itself? Like the background, maybe?

See the Pen on CodePen.

This is one of those cool ideas that's good to have in your back pocket for future use.

Hidden door CSS button effect

Oh! look, a Twitter icon. I guess I just click this and it takes me to the user's twitter page. Like the 10 zillions other Twitter buttons I've seen in my life.

Oh well, might as well click it:

See the Pen on CodePen.

Woah! Is it a Twitter button, or the entrance to a shuttle bay on the Starship Enterprise?

Although there is some JS in the Pen, that's just to import the Twitter link, in this case to creator Tim Holman's Twitter link. The JS doesn't have any effect on how the button works - and of course you don't have to use it for Twitter - you can adapt it for anything.

Animated Pac-Man CSS button on hover

Here's an incredible piece of work by Dario Corsi. Check it out:

See the Pen on CodePen.

There's so much to appreciate about this:

  • It's pure CSS - not an image or line of JS insight
  • Of all the ghosts, Dario chose Blinky, the leader of the ghosts and Pac-Man's arch enemy
  • Blinky's eyes look in the direction he's moving!
  • The animation stops in-place when you stop hovering, rather than resetting to the beginning

Great stuff!

A true 3D button animation using three.js

This one isn't pure CSS, but I thought I'd include this to show you the type of things that are possible when bringing JS into the picture. This is a "true" 3D hover effect button by Robin Delaporte:

See the Pen on CodePen.

Look at that! If you move your mouse around the button area, the shapes react to your mouse movements.

Now, when I say "true" 3D, obviously it's not actually 3D since it's a flat image on your screen! I just mean that there's a Z-axis involved. These are not simply 2D objects at different depths, moving at different rates (as is the case with parallax ). The angle and position of the object along the Z-axis are calculated in JS. This means you can move or rotate it along the third dimension, and add lighting effects to really bring it to life.

To do this, Robin has used a JS library called three.js - a very popular library for making 3D animations on the web, and it's actually fairly easy to get started with. Of course, you'll need some practice to create something like this, but if you really study it, you can make some amazing stuff.

Speaking of easy-to-use JS libraries that help you make great stuff, you might also like fullPage.js. fullPage helps you make gorgeous one-page sites quickly and easily, and it works like a charm alongside WordPress, React, and Vue.

We've been talking a lot about using animations to improve the visual appeal of your site in this post, and if you're into this sort of thing have a look at the effects you can use with fullPage. You can use different effects as you scroll from one full-screen page to the next (the card effect is pretty snazzy for instance), or in sliders. All of this is built-in and works out of the box.

And of course, you can integrate all of the awesome CSS button hover effects we've just looked at into your fullPage.js site! In fact, the background image change button could work really well on a full-page site - give fullPage.js a try and see what you can come up with!

About the author:

Warren is a front end developer based in the UK.
You can find more from him at https://warrendavies.net