CSS Button Hover Effects

February 6, 2014 at 2:00 pm By
Download Demo

Today I’d like to share with you a bunch of pretty neat CSS only buttons I’ve put together. I’m also going to go over their creation, and using them in design. Read on and enjoy!

Button design can actually be quite fun so here are a bunch of ideas I put together to share with you which you are totally entitled to use on your site or project. The idea was to use CSS in a way to make buttons more fun, or interesting at least, and I accomplished this in a few ways.

The Buttons

The buttons can be viewed on the demo page and consist of just CSS. To accomplish this (and because CSS doesn’t allow unlimited pseudo elements), I’m using a few spans inside an anchor each button to make it work how I want it to work. These are acting as pseudo elements in a way. For example, for one button I might write this:

<a href="#" class="type-3">
	<span> Open </span>
	<span> Open </span>
	<span> Open </span>
</a>	

Then using some CSS we can accomplish just about any effect. The idea is simple:

  • Take the above code with the 3 anchors and position them all absolutely on top of each other
  • Using clip we can cut bits out of the anchors to make doors or folds or whatever we want
  • Then apply a transition for hovering and we have a nice little hover effect
  • And that’s it! We can create some pretty neat effects

Now I said that I’m using these anchors as pseudo elements, but I have actually used psuedo elements on our pseudo-pseudo elements, so in a way we have some pseudo pseudo-pseudo elements. Err, yeah, it can get a bit complicated. Not to worry though, it’s not that bad!

I’ve then included some transitions which vary a little. Some transitions are longer than others and if we have pseudo elements that need to come in at different times there are delays on the transitions too. You could use animations but I felt as though that would be an overkill for this kind of work.

Implementation

To implement just download the buttons and include the CSS file in the head of your document. I’ve provided a minified CSS if you desire. Then just implement as shown in the index.php file. For example, type-1 might look like this:

<div class="type-1">
	<a href="#"> Flip </a>
	<a href="#"> Flip </a>
</div>

Please do read over the code I’ve used though, because the number of anchors and elements in each type can vary, so be careful. Apart from that, I hope you enjoy these buttons! Feel free to use them on any project you want.