Woah! Is it a Twitter button, or the entrance to a shuttle bay on the Starship Enterprise?ДЄlthough 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. Like the 10 zillions other Twitter buttons I've seen in my life. I guess I just click this and it takes me to the user's twitter page. This is one of those cool ideas that's good to have in your back pocket for future use. 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? 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). 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: 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. Note that you'll need to change the data-attr and the text within the span to change the text shown. 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). You might have seen these 3D rotating buttons before. 3D rotating button effect on hover with CSS only Here are a few ways you could mix it up a bit: 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. There are lots of ways you can do create the fill effect besides a fade. But that doesn't mean you can't get creative with it. To be fair, there's a reason this is common - it does the job and does it well. Very nice! CSS button on hover fill effectsДЄs 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.

When you hover, the icon expands and spreads over the text. 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. Here's a unique hover effect that might be useful to you: 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:Д«ut, box-shadow gives us a lot of control of how the shadow appears:ДЄnd, we can animate all of this! Here are some creative ideas on how you can use box-shadow in your button hover effects:Д¬heck out Mozilla's article on box-shadow to learn more. CSS button hover effects using box shadow You can also create an animated gradient effect around the border, instead of the background. Here are a few examples - you can take one of these and change the gradient colours and angle if you want: The result is an animated gradient effect on your buttons. 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. So let's explore some other options! CSS button gradient effectsДЄt the time I'm writing this, you can't animate gradients with CSS - at least, not directly. 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.

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?Д®ven 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.

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. Let me test my psychic powers for a second.

Cool css3 menu hover effects