In a previous post, I talked about creating dynamic and scaleable buttons using CSS3. While we can use “border-radius” for rounded corners and “box-shadow” for a nice dropshadow effect, there’s still a problem with giving the button a 3d / plastic look without using images. In my previous example I used a small PNG image (with a gradient from white to transparent) as a background to achieve that effect.

Now, with the release of Firefox 3.6 (Safari / Webkit supported that a bit earlier) we don’t need any images at all, thanks to the “moz-linear-gradient” / “webkit-gradient” property.

In detail, the buttons use the same code as the buttons from my last example. The only thing we have to change is the background attribute. Instead of using an image, we now add a CSS generated gradient, that gives our button a more plastic look. This is done by using “moz-linear-gradient” respectively “webkit-gradient” for Webkit based browsers. For our buttons, it looks like this:

background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));

This draws a linear gradient from white at the top to a light grey at the bottom. Instead of using the RGBa color values you could also use #Hex codes, as we don’t need any transparency here.

In addition to the previous example I also added an “active / focus” state to the CSS in order to make it feel more like a real button people are used to.

Click here to view the full source code and a live demo.

3 Responses to “CSS3 Buttons Without Any Images”

Pings

Recent Tweets

• #entfolgen bei twitter. Das hört sich doch nicht gut an!?%$&@ 2010/09/04
• Finally going to see #inception tonight! 2010/08/31
• “@KamiKa_SR: The Expendedables 8/10” ja - coole 80/90er oldschool Action mit der ganzen Crew. Seagal, van damme und Chuck fehlen, dann 10/10 2010/08/31

Categories