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?
Or perhaps you google a bit and found a list of cool CSS animations to add to your website and picked a couple of them, right?
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:
You can also create an animated gradient effect around the border, instead of the background. Or both:
Check out this amazing CSS generator for shadows with gradients and how to create a round button with CSS, so you can take a look at a few examples too.
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:
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:
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:
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:
If you like beautifying elements like buttons, you will for sure like turning checkboxes into beautiful toggle switch elements. Check out the best examples we’ve found on CSS toggle switches.
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:
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:
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?
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:
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:
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:
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!
