How to style an HTML link like a button?

I have some HTML links and I want to display them as buttons. I spent a few hours appying CSS styles, but never got something that appears identical to a button.

So this is what I’m doing now. It is obvious to read, and seems to work.


The W3 validator approved it in HTML 4 strict. So, all signs suggest that this is the way to go, but I don’t follow the semantic web conversation very closely.

So, for those of you that do pay attention to all that stuff, what’s bad about this approach?

Published by

matt

My name is Matt Wilson and I live in Cleveland Heights, Ohio. I love random emails from strangers, so get in touch! matt@tplus1.com.

  • http://www.codesoftly.aaronoliver.com Aaron Oliver

    Is your button inside a form? Reading the spec (http://www.w3.org/TR/REC-html40/interact/forms….) implies button elements are a flavor of input. So from that perspective, I'm not sure it's clear what linking a form input means.

    I HAVE seen examples of people making a “mini-form” containing a single button input, and the form's “action” attribute is the desired URL to link to. I guess this is kind of abusing the meaning of “form”, but may end up being a little more reliable.

  • http://blog.tplus1.com Matt Wilson

    Nope, the button is not inside a form. I suppose I could replace the
    a tag with a form that uses the “get” method. Clunky.

    Matt

  • http://www.codesoftly.aaronoliver.com Aaron Oliver

    Yep. I agree there's probably no perfect way to do it. Are you SURE there's no styling out there that you can slap on?

  • http://blog.tplus1.com Matt Wilson

    No, I'm not sure that I can't style a link to appear like a button.
    I'm pretty confident that eventually I could figure it out. But I
    burned as much time as I am willing to spend, so I'm using a
    workaround and keeping a low-priority ticket to remind me later.

    Matt

  • Helder Magalhães

    > what’s bad about this approach?

    Nothing is particularly bad and (at least for me also) I'd expect it to work flawlessly: nevertheless, Internet Explorer (6 to 8) doesn't follow the link, although it seems to trigger link events (such as an “onclick” handler). 😐

    Firefox and other browsers seem to work as expected, but Internet Explorer can't easily be ignored (at least, not yet). 😉

  • http://www.uk-cheapest.co.uk Domain Names

    THanks

  • http://casualsummerdresses.co.cc casual summer dresses

    Loved to read your blog. I would like to suggest you that traffic show most people read blogs on Mondays. So it should encourage bloggers to write new write ups over the weekend primarily. regards Roko Seaton

    …

  • http://sureshchaudhary.wordpress.com/ Seo India

    Simple, It's a piece of code only. 🙂