Search - button

Sexy Buttons in Pure CSS*

*in this example I use an image to further demonstrate the capabilities of CSS. The buttons look just as good without the image!

I talked briefly about CSS3 in my last post. I want to take some time and demonstrate some of the possibilities created by CSS3. Here I will show you how to make some nice looking buttons using just CSS! While reading through this post, you might feel overwhelmed by the amount of CSS, don't worry; because of browser compatibility, it is required that we specify CSS rules for multiple browsers. Once you get past the multiple-browser support, it's quite simple. Let's jump right into it!

Buttons typically have a few states. The button we're putting together here will have three states: normal, hover, and active- the purpose of each seems straight-forward so I'll save the explanation for another day. The code below shows our setup for the normal state.

Read the rest