-
Styling buttons to look like links
A common mistake that many developers make is to use a link to trigger an action on the server, for example deleting an item from a shopping basket or adding something to your favourites. Both of these examples are actions that modify state on the server and should therefore be performed using '
post'.However, sometimes even developers who know that is wrong to use a link where they should be using a form, get sucked in to doing so when the design requires a button to look like a link.
Please note that I am definitely not encouraging the redesign of button elements to look like links. I believe that we shouldn't mess too much with browser defaults for functional things like form controls, scroll bars and the like. That said, sometimes you just have to build what your designer tells you to.
It actually isn't hard to make a submit button look like a link using CSS so you should never find yourself in a position where you have to sacrifice forms for links purely for the sake of the design.
Firsly the markup: although you can use an input
type="submit"as a submit element and this example would work in the same way, the button element is, in my opinion, a much better option. It is really flexible and can have a variety of different elements nested inside if you so choose, from simple text with an image right through to headings and paragraphs. This article on buttons by Aaron Gustafson back in 2006 is still fairly relevant today and explains some of the uses the humble button element can be put to.Another useful article also from a while ago explains the techniques that Wufoo use to style links to look like buttons. The really important thing to take away from this article is that putting
overflow: visibleon a button fixes the crazy width issue that IE likes to deal us.I have posted a simple demo for you to follow along in your browser. For the purposes of this example the markup will be:
<form action="#" method="post"> <p><button type="submit" class="link"><span>Hello there I am a button</span></button></p> </form> <p><a href="#">That's nice, I am a link</a></p>The basic page in this demo has the following styles applied to the links and body:
body { font-family: "Verdana" sans-serif; } a:link, a:visited { color: blue; } a:hover, a:focus, a:active { color: black; }Next I add the magical incantation to kick the width in IE for all buttons:
button { overflow: visible; width: auto; }I have added a class of link to the button that I wish to style as a link element and the basic styles that I apply to this are the colour and font family (the button seems to inherit system font settings), as well as over-riding the button defaults with regards to border, margin, padding and background.
The default cursor for button elements is a regular arrow. I normally set
cursor: pointerfor all button elements to ensure the user knows they are clickable. This makes even more sense for buttons that are pretending to be links.button.link { font-family: "Verdana" sans-serif; font-size: 1em; text-align: left; color: blue; background: none; margin: 0; padding: 0; border: none; cursor: pointer; }Interestingly, Mozilla won't let you select the text of the button element like other browsers will, so to override this and enforce that the user can select the text of our psuedo-link, you can apply the following as well:
-moz-user-select: text;You can also choose to override all your other button styles if there are any.
Now you almost have a link. Those of you paying close attention earlier on will have noticed an as yet unexplained inner span to our button. This is because it does not appear to be possible to set text-decoration on a button directly and depending on how you have your link styles set this is something you are likely to want to do.
The text-decoration: underline rule is actually applied to the span on hover or focus of the button. This way is more flexible if you choose at some point to add or remove an underline on hover.
button.link span { text-decoration: underline; } button.link:hover span, button.link:focus span { color: black; }Naturally everybody's 'favourite' browser, Internet Explorer six will not display the hover effect on your link because it doesn't 'do' hover on arbitrary elements, only on actual links. You can fake this effect with Javascript if you really wish, adding a class on hover and removing it on mousout. Other limitations of this technique are that selection of text looks a bit dodgy in all versions of IE.
My example above is very simple. If you wath a button that appears in flow with text as a link, for example the delete link on a shopping basket item in this example, you will also need to apply '
display:inline' to both the form and any block level elements inside.So there you have it, no excuses now — go forth and use the correct HTTP method!
-
pixelspread: List Based Calendar
pixelspread: List Based Calendar — Cute list based calender, using the same markup but different CSS to display two different calender views. It would be even better if it sported hevent though :).
-
Styling File Inputs with CSS and the DOM // ShaunInman.com
Styling File Inputs with CSS and the DOM // ShaunInman.com — a little bit hacky but pretty smart.
-
Particletree » Rediscovering the Button Element
Particletree » Rediscovering the Button Element — Beautiful use of the button tag styled cross browser as used in Wufoo, with the possablility of using the same styles for links.
-
Uni-Form
Uni-Form — beautiful form design.
-
Unobtrusive connected select boxes - yet another solution approach - Wait till I come!
Unobtrusive connected select boxes - yet another solution approach - Wait till I come! — nicely implemented connected selects.
-
swfIR: swf Image Replacement
swfIR: swf Image Replacement — This degrades nicely and is really quite sweet! - with everything going on recently I am beginning to be persuaded toward the benefits of flash - those who know me will note this is a big deal!
-
I Speak of Dreams: Dyslexia is a Junk Diagnosis
I Speak of Dreams: Dyslexia is a Junk Diagnosis — symptoms of dysexia explained and resoned ways of teaching dysexic childeren.
-
The Kismet Heuristic » Twitter tours
The Kismet Heuristic » Twitter tours — Interesting use of twitter - twitter tours.
-
Easy cross-browser transparency | Bite Size Standards
Easy cross-browser transparency | Bite Size Standards — for reference.
-
A List Apart: Articles: Making Compact Forms More Accessible
A List Apart: Articles: Making Compact Forms More Accessible — .
-
A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique
A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique — .
-
The Man in Blue > Resolution dependent layout update
The Man in Blue > Resolution dependent layout update — Update to the initial 2004 post on adding an additional stylesheet based on browser size.
-
Reliably attaching CSS
-
Hacking Knowledge: 77 Ways to Learn Faster, Deeper, and Better | OEDb
Hacking Knowledge: 77 Ways to Learn Faster, Deeper, and Better | OEDb — .
-
Inline image quotes
16 items tagged "technique"
Look at "technique" on del.icio.us, Flickr or Technorati