Super Simple CSS Buttons

While playing around with a few button designs for my latest project, I came up with a simple CSS-only button system that is both lightweight and compatible with nearly all major browsers. Check it out and let me know what you think!

Examples

Download

The zip file below contains the CSS and HTML to create all of the elements in the above example, as well as the image file used.

Simple CSS Buttons (zip)Examples

The HTML

I wanted to keep it dead simple to use, enough so that a single class could be added to any element to create a button. The HTML I used in the example is as follows:

1
2
3
<a href='http://google.com/' class='button'>Google</a>
<a href='http://bing.com/' class='button red'>Bing</a>
<a href='http://devgrow.com/' class='button large green'>DevGrow</a>

The CSS

In order to add a subtle gradient effect, I decided to use a single image file. If you really want, you can leave that out and the buttons should still work fine. To give you an idea of how it can be customized, I created styles for 7 additional colors and 3 different sizes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.button {
    padding: 5px 10px;
    display: inline;
    background: #777 url(button.png) repeat-x bottom;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #666;
    }
.button:hover {
    background-position: 0 -48px;
    }
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    }
.button.red { background-color: #e50000; }
.button.purple { background-color: #9400bf; }
.button.green { background-color: #58aa00; }
.button.orange { background-color: #ff9c00; }
.button.blue { background-color: #2c6da0; }
.button.black { background-color: #333; }
.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
.button.small { font-size: 75%; padding: 3px 7px; }
.button.small:hover { background-position: 0 -50px; }
.button.small:active { padding: 4px 7px 2px; background-position: 0 top; }
.button.large { font-size: 125%; padding: 7px 12px; }
.button.large:hover { background-position: 0 -35px; }
.button.large:active { padding: 8px 12px 6px; background-position: 0 top; }

The CSS is pretty self-explanatory, however an interesting point is that I change the padding in the active state (.button:active) while shifting the element up by 1 pixel – this creates a pseudo-3D effect of physically pushing down on it.

Compatibility and Final Remarks

While the buttons themselves do work on all major browsers (FF, Safari, Opera, Chrome, IE7+), certain effects may not be available on all browsers. For instance, IE and Opera will not render rounded corners.

Play with it and let me know what you guys think! I’m sure most of you designers already have your own button code – if you’d like to share it, please post it in the comments (directly or as a link) so the other readers can check it out!

Also, if you haven’t already, please consider subscribing to the RSS feed or following us on Twitter.

Enjoyed the post?

Then you should follow me on Twitter or subscribe to the RSS feed.

  • Pingback: Super Simple CSS Buttons | DevGrow | My Blog

  • http://regisgaughan.com Regis

    Actually, you will ideally want to use an inline-block styling for the button. Because you’ve given padding to an inline element, it won’t actually take up space surrounding it, causing surrounding elements to awkwardly run into it and to extend beyond it’s parent element (think buttons in a bordered box, the border will run through the buttons, or an overflow:hidden container will cut off the height of the buttons altogether).

    Add these cross-browser attributes to the .button class to fix this problem:
    display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;

    (you can separate zoom and *display into the appropriate IE stylesheets if you care about validation)

    • rpgivpgmr

      Thank you.

  • Pingback: Super Simple CSS Buttons | DevGrow | とっても！　ちゅどん（雑記帳）

  • http://variable3.com/blog/ Harsha M V

    Awesome buttons. will use it for sure in my upcoming projects

  • http://www.cssfind.com sivaranjan

    Those are super cute ! I am gonna use them for sure. I have added this article on my CSS aggregator site , I hope you dont mind!

    • http://devgrow.com/ Monji

      Thanks sivaranjan, I appreciate it! Hope they work out well for you.

  • guido

    We had problems using Buttons with Internet Explorer in pages designed using the YUI CSS stylesheets.
    Seems to be some sort of interaction between YUI and your stylesheet, evident in IE but not in Firefox, for example.
    Very fine work, anyway. Cheers.

  • KBM

    Nice buttons! Added some compatibility for IE XD. Thank you very, very much! Your work is very much appreciated. Keep it up!

  • Pedro

    the best solution i found for my new project
    thanks

  • http://www.burning.it Luca Vignaroli

    May I suggest to add a “this.blur();” to the jQuery script? that will make IE release the button once it’s clicked :)

    $(‘.button’).click(function(){ this.blur(); return false; });

  • http://freehacking-link.blogspot.com MrCQ

    Good but I use css with my project. It work only in firefox. In IE I can’t click the button

  • Pingback: CSS кнопки: красиво и просто « sklazer's blog – Арсений Дугин

  • http://www.liviuanghelina.com Liviu

    Tnx so much, very simple and useful!

  • Pingback: シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 « 30歳からのプログラマ道

  • guacamoly

    Is there a simple way to define what the width of the button should be? I tried using min-width and width and it doesn’t seem to change anything.

  • grandma

    hello i change the “#” in the source to a website like google.com and then i load the index.html in a browswer and no matter what browser i use the button does nothing does not go to google. what did i do wrong?

  • http://www.cquinndesign.com Chris Quinn

    I am also having the same issue that “Grandma” is having. When I use the hyper-links the buttons do not work. I was using them for a website design I am working but now I can’t figure out how to make the hyperlink work.

  • http://thesismart.com/ Jitesh Golecha

    The buttons are awesome. I have used it on my site. :)

  • Pingback: 10+ Css Button Designs - Css Tutorials

  • JY

    thanks-clear and simple

  • groszko

    Simply and nice tutorial, here is another one about CSS Button: http://www.freewebelements.com/css3-web-button-tutorial/

  • Brian

    How would I make these work with adding a in the text so that it has 2 lines?

    • Brian

      HTML’s BR… The less than and more than symbols didn’t show

  • Pingback: Button samples

  • Gary

    How would it be possible to get the width of the button to match that of a DIV it is contained within?

    I’ve tried and can’t seem to get it to stretch.

    I’d like all my buttons to be the same width rather than only as long as the button text.

  • Gary

    For some reason my buttons aren’t working when using href for links.

    I commented out the link to https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js and now they work but a lot of other features don’t.

    Conflict with jQuery!

  • Jorge Torrecilla

    Gracias, es un muy buen ejemplo con un diseño muy fino, lo voy a usar en mi nueva web :D

  • http://www.indezoo.com/ idris

    great examples…thank you for sharing!!!

  • Heden

    Nice framework Button… Salam dari Indonesia… :D

  • Taco Dunam

    What’s the JQuery for?

    • Anonymous

      I used jQuery in the example page to disable the buttons from having any action when you click.  It’s not necessary at all to make the buttons work, they only require the proper HTML and CSS.

  • Mashrufz

    the download buttons are even better why don’t you show how to make them :)