CSS3 Buttons Without Any Images

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.

CSS Buttons Without Images

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.

CSS Buttons Without Images

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.

23 thoughts on “CSS3 Buttons Without Any Images

  1. Helledge

    Hmm… In IE it looks like a standart button (yeah, i know IE sux ;). In Safari it looks a little different (not as on your picture). Anyway, nice CSS3 buttons, thank you for post.

  2. Pingback: Creating Dynamic Buttons With CSS3 - naioo.com – Design // Dev // Inspiration

  3. AJ

    Wow really nice use of CSS3. I can’t wait untill all browsers support CSS3 – it will make web design much easier and better.

  4. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.72) | Speckyboy Design Magazine

  5. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.72)- rampantdesigntools.com

  6. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.72) | Typography Blog

  7. Pingback: CSS3 Buttons Without Any Images – naioo.com – Design // Dev // Inspiration « Niki blog

  8. tg2345

    If you want this to work in all IE browsers check out CSS3 PIE. Works great, all my buttons render in IE like a dream even with hover effects and everything

  9. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.72) | AllAboutBoss.com

  10. Pingback: CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) | Programming Blog

  11. Pingback: CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) | Website Design Tutorials & Guides

  12. Pingback: CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) « Free UK Web Design

  13. Pingback: CSS3 Buttons « SoftPalace

  14. Pingback: CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) | JCODING

  15. Pingback: CSS3的按钮10+ Awesome Ready-To-Use Solutions | WebCooky

  16. Pingback: CSS button, 110 best!

  17. onigetoc

    Hi,
    I prefer to add
    cursor: pointer; /* cursor: hand; for IE5 */

    to get a hand when you hover the buttons.
    But they look cool
    Die IE :)

  18. Pingback: Selección de botones CSS | La Isla Buscada

  19. Pingback: Most Hot Latest CSS And CSS3 Buttons, 110 Best Of The Best Sets !

  20. Pingback: Selección de botones CSS | Strategist en Español

  21. id231

    for IE look up filter. You will get something like this:

    background:-moz-linear-gradient(top, #A7BCD6, #7D8DA0) repeat scroll 0 0 transparent;

    background:-webkit-gradient(linear, top, bottom, from(#A7BCD6), to(#7D8DA0));

    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#A7BCD6′, EndColorStr=’#7D8DA0′, GradientType=1);

Leave a Reply