CSS3 Animated Buttons

Today I was tasked with creating some wacky CSS3 animated buttons. I started out by looking at one or two tutorials before I was able to come up with something of my own.

The button made use of three typical states: regular, hover and active. I started out by coding the buttons so they’d look fine in non-animation capable browsers. I split the animated parts separately and placed them into spans:

<a class="btnSellers" title="Sellers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>
 
<a class="btnBuyers" title="Buyers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>

These are styled and formatting quite normally:

#btnVideos .btnSellers, #btnVideos .btnBuyers { background: url('images/btnSellers.jpg') no-repeat; float: left; height: 92px; margin-top: 80px; position: relative; width: 229px; }
#btnVideos span { display: block; position: absolute; }
#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px;  top: -26px; width: 102px; }
#btnVideos a:hover .monitor { top: -36px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; top: -12px; width: 51px; }
#btnVideos .play:active { background-position: bottom; }
 
#btnVideos .btnSellers:hover { background-position: left -91px; }
#btnVideos .btnSellers:active { background-position: left -183px; }
 
#btnVideos .btnBuyers { background-image: url('images/btnBuyers.jpg'); margin-top: 54px; }
#btnVideos .btnBuyers:hover { background-position: left -92px; }
#btnVideos .btnBuyers:active { background-position: 1px -184px; }
#btnVideos .btnBuyers .monitor { background: url('images/iconBuyers.jpg') no-repeat; }

Adding the animation in was really very easy. First, we needed to tell the buttons that we wanted to animate them eventually. You’ll put these in your normal states:

#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; transition:all 0.3s linear; top: -26px; width: 102px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; top: -12px; width: 51px; }

As you can see, I’m using different transition easing – a linear and an ease-in-out. There’s no hard rule for which to use, just experiment until you get an effect you like.

To animate the play button, all we had to do was give it a 360 degree rotate:

#btnVideos a:hover .play { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

To pull the monitor graphic up was even easier, I just adjusted the top value:

#btnVideos a:hover .monitor { top: -36px; }

Definitely much quicker and cleaner than jQuery!

You can see a demo of this here.