Wednesday, June 10th, 2009

Styling buttons as links allowing you to POST away

Category: CSS, Examples

Have you ever wanted to just <a href=”path” action=”post”>? Remember the hub-ub with the old Google Web Accelerator and how it started to crawl links to delete actions that were mistakenly using GET?

Natalie Downe has written up a piece on styling HTML buttons as links which means that you can somewhat get the same effect. It shows how you can use an inline span to get the hover effect, taking:

  1. <button type="submit" class="link"><span>Hello there I am a button</span></button>

and styling it with:

  1. button {
  2.     overflow: visible;
  3.     width: auto;
  4. }
  5. button.link {
  6.     font-family: "Verdana" sans-serif;
  7.     font-size: 1em;
  8.     text-align: left;
  9.     color: blue;
  10.     background: none;
  11.     margin: 0;
  12.     padding: 0;
  13.     border: none;
  14.     cursor: pointer;
  15.    
  16.     -moz-user-select: text;
  17.  
  18.     /* override all your button styles here if there are any others */
  19. }
  20. button.link span {
  21.     text-decoration: underline;
  22. }
  23. button.link:hover span,
  24. button.link:focus span {
  25.     color: black;
  26. }

You can see the simple example in action.

Posted by Dion Almaer at 3:15 am
15 Comments

+++--
3.8 rating from 24 votes

15 Comments »

Comments feed TrackBack URI

The question is, why would you want to?

You shouldn’t go out of your way to break the conventions, that makes your application / website EASIER for the user to understand and use.

While Natalie recommends not tampering with buttons to make them look like links, she caves to uneducated designers too easily ;-)

I would recommend getting the insistant designer a copy of Steve Krug’s excellent book “Don’t Make Me Think” – http://www.sensible.com/buythebook.html

Comment by MorganRoderick — June 10, 2009

There are other ways to POST with normal links like for instance the way ASP.NET LinkButtons works, and the way we’re using them in Ra-Ajax (see; http://ra-ajax.org/samples/RSS-Sample.aspx – which are using POSTs for anchor elements ) and also there are way better ways to exploit the BUTTON element then styling them as links (see; http://ra-ajax.org/samples/CRM-Sample.aspx – which uses left, right and center elements to create “stylable buttons”)
.
When that’s said I’d like to say that in general terms I agree with MorganRoderick. Also on the book recommendation, all though for experienced web-developers it’s a bit too noobish … still great book anyway :)

Comment by ThomasHansen — June 10, 2009

One good reason I could think of is having a “Next” button and a “Previous” link (which is also a button). The Previous button will still have to submit data via POST, but depending on the application it might be necessary to visually de-emphasize it.

Comment by Joeri — June 10, 2009

There’s nothing new about styling html elements that are descendents of a button-element.

Comment by PeterGeil — June 10, 2009

IE6 does not support multiple button tags.

Comment by fforw — June 10, 2009

This looks like it would go along with button_to in Rails, which was reported on here a while ago:

http://ajaxian.com/archives/ruby-on-rails-uses-ajax-to-simulate-post-links
http://railsapi.com/doc/rails-v2.3.2.1/classes/ActionView/Helpers/UrlHelper.html#M002352

Comment by smith — June 10, 2009

You might as well make a link submit a hidden form via Javascript if you’re going to mess with standards that much.

Comment by Darkimmortal — June 10, 2009

I am doing something similar with instead of . I need to see if some of the author’s styles will work better than mine with sizing. Internet Explorer 5, 6 and 7 really like to screw up the width of any submit button, styled like a link or not. If it works I like the author’s solution to this better than mine as mine relies on IE conditional styles, which AFAIK can’t appear in a .css file but must appear in a section of the page, which, like most things IE, sucks. And of course, IE8 appears to fix the problem, but my hack broke IE8 until I revised the conditional style.

Comment by JonathanLeech — June 10, 2009

seems like ajaxian strips out tags instead of rendering them as text. Minus the angle brackets, my previous post should read “I am doing something similar with input type=’submit’ instead of button.”

Comment by JonathanLeech — June 10, 2009

This is a horrible idea. My apologies if I’m a bit direct here; but why would anyone even want to style buttons as links? It confuses people: compared to a real link, it no longer shows the url, it doesn’t react to middle-button clicking, ctrl+clicking or the other usual methods of opening the link in a new tab or window or dragging it to copy the url, among other things. Of course, those options don’t do anything because it’s a button, but the user doesn’t know that. All he/she knows is that something’s wrong. If you really have to POST something, make it a button.

Comment by DiSiLLUSiON — June 10, 2009

This is a horrible idea.

Come on now. Don’t you think that is a little over the top? Getting involved in a land war in Asia is a horrible idea. Styling buttons as links is a nifty hack, and really only intended for a narrow use case. Like having a delete link for a list of items in a shopping cart, as Natalie demonstrated. I’d rather have that than a bunch of blocky submit buttons all crammed together. And I don’t think users will be expecting to open such a link in a new tab, or copying the URL, etc.

All in all, I think it is quite clever and addresses the need to maintain idempotency of delete actions.

Comment by stringify — June 11, 2009

Er, I mean it discourages the use of normal links for non-idempotent actions.

It’s late. I’m tired. :)

Comment by stringify — June 11, 2009

This isn’t doing anything that query string parameters on a link can’t do. I don’t think the illusory benefit of this approach warrants the confusion of users and extra code (to maintain also).

Comment by sixtyseconds — June 11, 2009

Please Please Please leave links and GET requests Idempotent…. please please please!!!

Comment by ryanjlowe — June 11, 2009

People are really getting hung up on GET / POST and impotence. While you can use this technique to make a UI that violates those conventions, there are plenty of use cases that don’t. For example, there are practical limitations to GET URLs that don’t exist for POST, like URL length limits. In my case, I have a form that is wrapped around of table, and each row of the table will fire off a seperate report. The form has some top-level controls, such as output format. Buttons look ugly and don’t convey the right meaning in that context. Buttons that look like links do, and the fact that it’s underlined and blue conveys to the user that it does something.

Now for delete links, or other things that would otherwise violate impotence convention. Go ahead and make it a link, a real link, or a button that looks like one. If its going to do something permanent, make the user take a second step, which really does a POST with a button that looks like a button, to confirm the action. Example: “Do you really want to do XYZ?” Yes / Cancel. This is the right thing to do in many circumstances any way, and some actions should have the user reauthenticate in addition to confirming. No excuse not to do it that way, especially with AJAX, the confirmation form can be a modal dialog and not even a new page.

Comment by JonathanLeech — June 11, 2009

Leave a comment

You must be logged in to post a comment.