Pure CSS3 Button Styling with Webkit and Moz

On 03.23.12, In BLOG, by

So you are looking at your PSD layout and thinking to yourself: “These buttons look sharp”. You start to cut them out of the template and realize something horrible! You are wasting kbs of loading time here. You are racking up tenths of a second and losing precious audiences around the globe! So you decide to fulfill the epic buttons by creating them with CSS 3!

Example:

I like to take into account the backwards compatibility which is why you see box shadow done multiple times.

button{
   border: 1px solid #8EC1DD;
   background-color: #DDEEFF;
   border-radius: 4px;
   box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   color: #3985a8;
   text-shadow: 0 1px #fff;
   padding: 5px 30px;
}

What a gorgeous CSS3 button utilizing shadows.

If you were looking to create a more rounded button like…

You would want to increase the ” border-radius: 4px; ” – in my example I used ” border-radius: 10px; ”

The opposite is true if you want to have a square button.

For the above example I used ” border-radius: 1px; ”

Following these simple steps can help eliminate the need for images thus reducing the amount of time needed to execute the loading of your site.

So that is all great with your CSS 3 button, but maybe what you want to do is give that button a hover effect. Well that is simple enough to do.

button:hover{
   border: 1px solid #8EC1DD;
   background-color: #DDEEFF;
   border-radius: 4px;
   box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
   color: #3985a8;
   text-shadow: 0 1px #000;
   padding: 5px 30px;
}

In this case I simply changed the ” text-shadow: 0 1px #fff; ” to ” text-shadow: 0 1px #999; ” It doesn’t look as clean, but it definitely emphasizes the text and you can see the color break through.

Think about all of the great possibilities with CSS3 using these techniques. Sure we applied them to buttons, but you could apply this to any object: boxes, dividers, menus, and on.

Stay tuned for more developments on CSS3. My next blog is going to be about CSS3 forms and how to make those forms come alive.