How to style an HTML link like a button?

Posted on by

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?

8 thoughts on “How to style an HTML link like a button?”

  1. 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.

  4. 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

  5. > 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). 😉

  7. 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

    …

Comments are closed.