Categories:

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.


<a href="/blah"><input type="button" value="get blah" /></a>

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?

Posted in Programming, web.

By matt

August 9, 2008

Comments

Viewing 5 Comments

Helder Magalhães 07/11/2009 12:18 AM 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

Aaron Oliver 08/10/2008 09:13 AM 5 points
Please login to rate.

Do you already have an account? Log in and claim this comment.

Is your button inside a form? Reading the spec (http://www.w3.org/TR/REC-html4... 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.

reply edit reblog flag

10 /people/aaronoliver/ /people/aaronoliver/following/ http://www.codesoftly.aaronoliver.com in/aaronoliver

Matt Wilson 08/10/2008 10:16 AM 3 points
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

26 /people/mw44118/ /people/mw44118/following/ http://blog.tplus1.com

Aaron Oliver 08/10/2008 12:17 PM 2 points
Please login to rate.

Do you already have an account? Log in and claim this comment.

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?

reply edit reblog flag

10 /people/aaronoliver/ /people/aaronoliver/following/ http://www.codesoftly.aaronoliver.com in/aaronoliver

Matt Wilson 08/10/2008 02:32 PM 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

26 /people/mw44118/ /people/mw44118/following/ http://blog.tplus1.com