Rendering fancy buttons in CSS3 is completely feasible with modern browsers. It’s less expensive on page load and you can accomplish popular button treatments with CSS border-radius, gradients and box-shadows.

I was building a button the other day that used a dark border and inset box-shadow to give it a slight inner glow. Guess what? When combined with border-radius, Chrome for Windows renders inset box-shadow incorrectly. The inset shadow ends up on the outside of the round corners. Sucks. Solution after the jump.

My solution? I replaced the 1px inset shadow with a standard 1px border that matched the color I used for the inset. Once that was in place I used box-shadow to create the outer border. If you center your box-shadow on the button and give it a size of 2px you will basically get a pin line of shadow surrounding the button. Make sure to adjust the shadow color to be a little darker to compensate for the shadow’s transparency.

Make sense? I’ll post the complete code for the button here:

a {
color:#ffaf2c;
border: 1px solid #7f2714;
font-size:14px;
padding:4px 10px;
-moz-border-radius:14px;
-webkit-border-radius:14px;
border-radius:14px;
-webkit-box-shadow: 0px 0px 2px #1a0807;
-moz-box-shadow: 0px 0px 2px #1a0807;
background-color:#651515;
background-color:rgba(122, 7, 18, .30);
margin-right:5px;
}

IE will just get boring square buttons with this code. To support IE you will need to send them them the background images.