Buttons without Images

I think the first time I noticed anything about making buttons out of CSS, it was at Chris Pirillo’s blog. Unfortunately, I don’t have the direct link, and I can’t seem to find it anyplace. If you happen to have it, pass it along and I’ll make sure to add it here. In the meantime, check out Chris’ site to see some buttons made purely with CSS (no images).

Naturally, when I went looking for the link, I couldn’t find it. So I really started off using Chris’ style sheet to figure out how the heck he did it. Turns out that his magic was in the use of the { display: inline-block; } tag, which worked well, but unfortunately isn’t valid CSS 2, and I wanted to validate my CSS, so that was out. There had to be a way!

Next stop, Google. Searching for “buttons without images” promptly turned up Marek Prokop’s page on designing W3C validation buttons without the use of images. Hmm. Seemed promising. There’s even a two-link format here! Some really good stuff. The examples were excellent and they helped greatly.

Unfortunately, in the meantime I had stumbled across Jeremy Hedley’s amazing site Antipixel, including a page titled, appropriately enough Steal These Buttons. And great buttons they are. But they are not CSS, dammit. Big help, Jeremy. ๐Ÿ™‚

The search continues. I found my way to another appropriately titled page, this time at the very entertaining Raging Platypus. The plat had even more of these amazing buttons. Again, they are images.

Not long after this, I stumbled across a whole site devoted to the things, once again appropriately titled Steal These Buttons. Now here is a resource. Over 1000 of these pretty little buttons just waiting for someone to use them. Many I’ve never seen elsewhere, but they’ve got to be out there. Again, we see images. Does no one want the challenge of doing it in CSS?!?

So back to Google I went. This time looking for “css buttons”. Interesting new site this time around, but again it uses the { display: inline-block; } method for creating the buttons (not to mention that they are still only a single link). Nice buttons, but still not helping me. Does the universe not want me to have these buttons?

Eric Meyer does the buttons without { display: inline-block; }, but alas the buttons are not the same size. And I’m picky, so I want all of my buttons to be the same size. Eric does have a nice XML button, though, in case you want to replace the little orange icon with one made from CSS. The quest moves on once again.

I stumbled across this tutorial on making buttons. It’s pretty detailed and seems helpful (okay, I didn’t read the whole thing), but the buttons aren’t what I’m looking to do, so I skipped right through it.

Finally I stumbled into this excellent description about making buttons with CSS. The buttons are, quite frankly, very nice. Even has that little 1-pixel border such as can be found on the buttons at Antipixel. The wheels had started turning (finally), though, and I thought surely that I could make the thing work by combining the tips I’d found thus far.

The problem I ran into is that when I used the W3C button code I found earlier, I noticed the right-hand link straying away from the left-hand link when I resized the text. Looks good at the default (medium in IE), but as it got bigger, the right box dropped down. As it got smaller, the right box drifted up. At this point, I’m beginning to think that the very fabric of the universe is against me.

I then found my way to another designer, inspired once again by Antipixel, who had just about everything needed. The only downfall was that the buttons were still just a single link, and if you’ll notice, only the text on the button is clickable. The portion of the background is not. And that just irked me. I wanted the whole thing to function as a link, not just the text.

I stumbled across another method for doing the buttons. This version is simpler, and makes use of some alternate tags, rather than filling the space up with DIVs and SPANs, but it’s still not quite there as the thing won’t be a fixed length. How to make the buttons look like a block in IE (which will do the fixed width), but display as if they were inline (not break to the next line)?

I even found a buttonmaker. I’m not too proud to let someone else do the work. There’s also a GUI interface for the buttonmaker. Unfortunately, I couldn’t get it to work. I think it wouldn’t have helped, but I would have liked to see it in action as more information to add to the process.

I guess that means I have to do it myself. After incessant toying with formats, it finally came to me. The W3C button implementation is good, and it’s valid CSS. The problem came when putting that button into another DIV. Why put it into another DIV? Because I wanted the one-pixel white border around the button, like Antipixel.

The problem came because the right half of the button (label spec1 in the examples) has a position value of absolute. This is what makes it work – instead of being on the next line, it’s positioned absolutely within the container (in this case the outside border). However, the top is specified as 0. This translates, literally, to pixel 0. The very top of the container. I didn’t want the top of the container – I wanted the top of the other button.

The answer? Very simple. Instead of specifying { top: 0; }, use { top: 0px; }. That little “px” did the trick, making the right-hand side of the button start not at the top of the container, but at a relative position of 0px when compared to the last item – the left side button. Now it works, with fixed width, two links and that little 1-pixel border around the bunch. ๐Ÿ™‚

I also added a different border, well, because I liked it.

Find this useful? I hope so. If enough people are interested, I can post my style sheets and the tags required to make the buttons that I use. So if you want to see the details and not have to go looking through the code yourself, let me know!


Posted

in

Comments

9 responses to “Buttons without Images”

  1. Chad Everett Avatar

    I think you’ll need to be more specific – what do you mean by “Text Button Link”?

  2. netman Avatar
    netman

    Oct. 19th 2004 Has anyone got Text Button Link figured out yet ? I want that bad! that’s not a real email. I’ll come back here to read any comments…

  3. Rebecca Sinclair-Smith Avatar
    Rebecca Sinclair-Smith

    Hi,

    I’m also trying to figure out how to make buttons without images. Can you please send me your style sheet and code? This site is great!

    Thanks so much,

    Rebecca

  4. Graham Leggett Avatar
    Graham Leggett

    I managed to get rid of the 3d border, which is a start. Mozilla behaves correctly, except for drawing an annoying square box around the button (my buttons are round) when the button gets focus. Haven’t got around that yet.

    What I did succeed on doing was to use CSS to do image rollovers: There are two images, on for selected, the second for not selected. These get swapped with each other based on :hover, :active and :focus like so:

    /* style of the text inside the button */
    .wide {
    font-weight: 600;
    font-size: 100%;
    text-align: center;
    }
    /* style of the deselected button */
    button.wide {
    display: block;
    border: 0px none white;
    padding: 0px;
    margin: 0px;
    width: 88px;
    height: 23px;
    background: url(‘../images/widewhite.gif’);
    }
    /* style of the button with “selected” background in place */
    button.wide:hover {
    background: url(‘../images/wideblue.gif’);
    }
    button.wide:active {
    background: url(‘../images/wideblue.gif’);
    }
    button.wide:focus {
    background: url(‘../images/wideblue.gif’);
    }

    The button itself is nice and simple:

    <button type=”submit” name=”searchSubmit” value=”Submit”
    class=”wide”><div class=”wide”>Submit</div></button>

    The background works in both IE and Mozilla (and I assume Firebird), but the rollover psuedo effects do not work in IE – however the button is still functional in IE, which is the most important thing.

    At least I am getting somewhere ๐Ÿ™‚ Thanks for the help…!

  5. Chad Everett Avatar

    Just adding some simple CSS to the tag (or including it in an external file) ought to do the trick:

    <button style=”border: 1px solid;”>Button Text</button>

    Here’s a site that has some more thoughts on styling the button tag.

  6. Graham Leggett Avatar
    Graham Leggett

    I’ve been trying to find a way of removing the 3d effect from a button created with a <button> tag: I want to achieve <input type=”image”> but without the annoying x and y coords on the submit. I’ve been looking for the magic bit of CSS out there that will turn it off, assuming it’s even possible. Any clues out there?

  7. Chad Everett Avatar

    I put together a follow-up piece to this one, please check it out and see if it helps. If you’re still having trouble, please let me know and I’ll see if I can help out.

  8. Dale Barish Avatar
    Dale Barish

    I’ve been looking long and hard for a way
    to make buttons the same size without using
    images. I would appreciate it if you could
    send me your style sheets and tags!

    Thanks!

    -Dale

  9. Eric Avatar
    Eric

    I am interested in using buttons without images. It sounds like you have just the thing I am looking for as well. Please send.

    thanks in advance,
    Eric
    Omaha Nebraska