one year agoStyling 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: visible on 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: pointer for 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!

Very nice!
One question: couldn't you use an anchor element (sans attributes) inside the button element instead of a span? Not terribly semantic, but might it solve the problem of hover on IE?
David Lindquist 10th June 2009 02:14
Imo there are good usecases of styling buttons as links. Submit/Cancel for example. Make the submit button look like a button and make the cancel button look like a link so that the submit button stands out.
Andreas 10th June 2009 08:04
Great to have this technique documented, buttons are a real pain to style.
However, using the <input /> element may be safer. IE doesn't distinguish between the button element that was pressed, and other button elements in the form.
IE will tell the server that all buttons in the form were pressed (btnname=save&btnname=delete), which is less than helpful.
Jake Archibald 10th June 2009 09:04
Great tutorial Nat.
This is something that has bugged me in the past and I've only been able to half emulate.
Now all we need is for HTML to support PUT and DELETE, then we can actually use the right HTTP methods.
Steve Anderson 10th June 2009 09:23
Nice article, CSS hacking at it's best!
But would you consider using JavaScript to hide the submit button, and replace it with an <a> element that simply triggers the form submit event? Leaving an unstyled, but functional button if JavaScript is off, and an easier to style cross-browser wise if JavaScript is on.
Cheers
Daniel 10th June 2009 09:23
Nice sensible tip, and something I've been doing for a while.
The only problem I've found is when you want to present several 'links' in a row (for example in a table row), where some are actual A links and some are link-styled buttons - the baseline for the text does not line up properly for the two different elements without some browser-specific padding.
Matthew Pennell 10th June 2009 11:35
Hi Natalie,
You may want to add following CSS to remove excess padding from buttons in Gecko (Firefox).
button::-moz-focus-inner{ padding:0; border: 0; }The difference may be small, but it will get you as close to normal anchor tag as possible. You can see live demo I prepared too. The pseudoelement is present in both button and input[type="submit"] elements.
Peter 10th June 2009 11:57
FWIW, here is a quick-and-dirty JQuery implementation of the JavaScript-only approach suggested by Daniel:
David Lindquist 10th June 2009 17:46
Re: Jake's comment, Coping With Internet Explorer's Mishandling of Buttons highlights two problems with the
<button>element and Internet Explorer:<button>instead of thevalueattribue (which is what other browsers send). This affects at least IE 6 and IE7.<button type="submit">, not just the one that was clicked, which makes it really difficult for the server to work out what the user wanted to do.Walter Rumsby 10th June 2009 23:05
For the purposes of this example the markup will be:
<p><a href="#"That's nice, I am a link</a></p>Missing something there. :p
Craig 11th June 2009 03:00
Jon Tan did something similar a while ago:
http://jontangerine.com/silo/html/button/
The note there is still relevant, for anyone considering this sort of thing:
"Note: Users expect that form controls will look like form controls. Therefore, it is not recommended to alter a form button (or any other form control) in this way unless you deem it absolutely necessary. This is a proof of concept only as the use of links for user controls is currently so prevalent."
Chris Shiflett 11th June 2009 04:23
Imaging if you could do it without the form
<button class="link"><span>Hello there I am a button</span></button>
wouldnt that be great.
kaare 12th June 2009 10:18
Nice work Nat!
Incidentally, have you come across a way to style <button> tags without using special CSS for IE and Firefox? I've used Derek DeVries approach at http://derekdevries.com/2009/04/02/custom-buttons-with-css/, but it's not clean!
Terry 15th June 2009 11:40
Great work Nat and thanks for linking up that old article of mine too!
Aaron Gustafson 18th June 2009 16:13
Great work Nat,
In my case, I've been solving this issue by using <label><input type="submit"... instead of a <button><span>
the label tag will trigger a form submit on the input and this approach is fully stylable.
The only problem I've found is that on 508 section a label tag should have text in it, but as far as I know we can solve by adding a title attribute.
<label class="button" title="Save your settings"><input type="button" name="SaveSettings" /></label>
You could hide the input through visibility:hidden and just use image background on the label. Or you can use sliding doors techniques to use the input text.
André Cassal 22nd June 2009 16:22
A while back I took the "use JS to swap out submit buttons with easily styleable links" approach and wrote it up here:
http://www.kelvinluck.com/2009/02/progressive-enhancement-with-jquery-example/
May be interesting as an alternative approach...
Kelvin Luck 23rd June 2009 15:37
But when you click on the link it still shows an impression (kind of a clicking effect) that it is a button. How can we get rid of that?
Saravanan 14th December 2009 18:54
@André Cassal
Unfortunately this doesn't work with Opera. :/
tolan 2nd February 2010 16:14
davidleonen 1st June 2010 09:33
Internet Explorer will send the innerHTML (or maybe innerText) of the <button> instead of the value attribue (which is what other browsers send). This affects at least IE 6 and IE7.
ClubPenguinCheats 25th June 2010 10:38
Hello, thank you for this very useful post, i found another solution, which looks good, and that without <button>.
<input type="submit" value="my submitable link" style="background:#fff;border:none;cursor:pointer;font-weight:400;overflow:visible;padding:0;text-decoration:underline; white-space: normal; text-align:left;" />
I just have to find 2 solutions to this solution:
1) i cannot see the underline with FF
2) i cannot break the line when the text is long in IE...
can someone help?
mickael 30th June 2010 14:21
RED DEVIL 5th July 2010 08:48
Very nice, thanks a lot :)
Paulius 9th July 2010 15:11
With a very easy to use interface you can also convert video file. your work will become very easy. You can download this software free from here: http://www.ezvideotools.com/mpeg-to-avi-converter.htm
malin 13th July 2010 03:22
very good information thank you for this .
Resveratrol Ultra 15th July 2010 16:20
Susan 16th July 2010 09:47
Voilet 18th July 2010 18:51
jessie 21st July 2010 08:06
simulation assurance auto 23rd July 2010 08:23
very good information thank you for this .
replica calvin klein watches 24th July 2010 04:27
semuaorank 25th July 2010 20:17
Browsing on Google for something else closely connected, regardless before i ramble on too much i would just like to state how much I cherished your post, I've added your web blog and also obtained your Feed, Again thank you very much for the article carry on the good work.
santa ana auto glass 27th July 2010 19:08
beaty 28th July 2010 14:25
business cards 1st August 2010 19:39
very good information thank you for this .
wwe 3rd August 2010 08:25
Ecomatic Salt Cells 3rd August 2010 08:54
I’m hoping this is just a great starting point for me and lot of designers struggling with reusable form interfaces in developing my applications.
used stationary bikes 3rd August 2010 10:40
Its an amazing post, the information you delivered that is awesome would wait for your next such informative and interesting post.
http://www.articlesbase.com/communication-articles/facts-on-free-reverse-phone-lookup-you-must-know-1598084.html
Free Reverse Phone Lookup 4th August 2010 12:36
Nice stuff, I always like to read this type of informative and interesting post,plz keep posting to upgrade my knowledge.
Acai Berry 4th August 2010 12:36
Thanks for the information on topics.I was excited for this article.
Thank you again.
helicopter tours hawaii 4th August 2010 19:20
Absolutely awesome work - this plugin has been extremely helpful to me and I'm so happy to see the improvements.
Keep up the good work!
Galapagos Islands Travel Tours 5th August 2010 04:41
Very cool stuff! Thanks, kepp going on!
replica hublot watches 5th August 2010 04:48
winni2078 0806<p>Juicy Couture is a fashion <a href="http://www.rolexwatchesblog.us/">rolex watches</a> brand which was founed in 1997 form California
omega watches 6th August 2010 07:25
data recovery 6th August 2010 07:53
yeast infection 6th August 2010 10:09
Great article. How you know about this in very details, it is really very interesting and knowledgeable things.
real estate investing 6th August 2010 10:24
When is the next post comming on this topic.
Regards
satellite pc tv 7th August 2010 01:49
Very cool stuff! Thanks, kepp going on!
replica jerseys 10th August 2010 05:00
I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
Moroccan furniture 11th August 2010 08:47
Thanks for giving the such a informative blog . I really like our explanations described here.
fleet tracking 12th August 2010 12:37
Gurleen 13th August 2010 10:46
Barren 13th August 2010 10:47
Scoden 13th August 2010 10:48
Goody 13th August 2010 10:49
Acuvue Advance Astigmatism 15th August 2010 07:06
With enough size of 11? x 8? x 6? inches to carry your stuff, this Coach Madison Floral Audrey might be carried with ease by means of its doubles handles with 5?-inch drop or by means of the detachable strap with 13?-inch drop. It has clasp on either sides, which somehow provides this a structured shape. It then opens by means of a zip on best and it would show zip, cell phone and multifunction pockets within the inside.
replica watches 16th August 2010 08:39
Thanks for the tutorial. I applied it at my site and will be using it from now on.
cod black ops 16th August 2010 13:03
That was exactly what I was looking for. You have done a wonderful job communicating your message. Keep up the good work.
Technology Blog 16th August 2010 16:12
its really interesting to read this post,i read it completely now i interested to know more about it so hope you may add more information in your next post.i will enjoy that too.
Acai Berry 17th August 2010 06:47
I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I will try to get the hang of it!
Electronic Cigarette 17th August 2010 11:47
CandyJou 17th August 2010 11:57
After hunting for so long, finally we got the right place for our digital office. At least we be easier to be seen by anyone.
http://www.esleepmasters.com/Swimming_Pools_s/2352.htm
henz 17th August 2010 16:32
Now our watches are even cheaper! We are glad to inform you that now the high <a href="http://www.superior-replica.com">replica watches</a> that are offered to your attention by our website are available at discount prices! This gives you a great opportunity to experiment with your style, buy as many watches as you wish and have a watch for any occasion and outfit.
replica watches 18th August 2010 06:20
above ground pool liner 18th August 2010 10:33
Dutchess Dickens 20th August 2010 01:59
Hey, I read a lot of blogs on a daily basis and for the most part
people lack substance but
I just wanted to make a quick comment to say GREAT blog!…..
I’ll be checking in on a regularly now….
Keep up the good work!
nike sb 20th August 2010 03:53
Hey, I read a lot of blogs on a daily basis and for the most part
people lack substance but
I just wanted to make a quick comment to say GREAT blog!…..
I’ll be checking in on a regularly now….
Keep up the good work!
vibram five fingers 20th August 2010 03:56
Kevin Sheppard 20th August 2010 14:09
Thanks very easy to follow.
Flower Tattoos 20th August 2010 15:39
That was exactly what I was looking for. You have done a wonderful job communicating your message. Keep up the good work
louis vuitton speedy 35 22nd August 2010 09:11
louis vuitton speedy 22nd August 2010 09:13
buy louis vuitton 22nd August 2010 15:39
Dear friends, thank you for visiting our website ,we are an international trade company,which specializes in NFL jerseys.We wholesale jerseys at competitive price,providing a huge range of <a href="http://www.nfljerseyse.com/pittsburgh-steelers-jerseys " title="Pittsburgh Steelers jerseys ">Pittsburgh Steelers jerseys </a> of different teams,such as Arizona Cardinal,Atlanda Falcons ,Baltimore Ravens,etc.You can buy cheap jerseys. Welcome to visist here .
cheap nfl jerseys 23rd August 2010 04:54
Hi there! Thanks for the info and the tutorial. Great!
Massagesessel 23rd August 2010 07:01
This gives you a great opportunity to experiment with your style, buy as many watches as you wish and have a watch for any occasion and outfit.
ricky 23rd August 2010 07:32
I admire the valuable information you offer in your articles. I will bookmark your blog and have my children check up here often. I am quite sure they will learn lots of new stuff here than anybody else!
Symptoms of Mesothelioma 23rd August 2010 21:11
Excellent post…………….. Now I agree with you that direct mail is a great way to get your message in front of targeted prospects of most kinds.
cheap shakira tickets 24th August 2010 06:28
These are wonderful! Thank you for finding and sharing
Red Bull Hats 24th August 2010 08:38
That was a great piece of information., I enjoyed reading it..,
wholesale new era caps 24th August 2010 08:38
thank you
air max 90 24th August 2010 08:41
I found so many interesting stuff in your blog especially its discussion.
Robin Hood Sword 25th August 2010 06:12
Pretty good post.I found your website perfect for my needs. thanks for sharing the great ideas.
seo newcastle 25th August 2010 06:41
Useful information shared..I am very pleased to study this article..many thanks for giving us nice information.
Cotton Yarn 25th August 2010 07:41
Amazing..you really made my day & after reading this Surely..i ll twit this to my all friends to know more about this blog :)
Acai Berry Diet 25th August 2010 08:21
Great post - Just subscriped to your RSS feed.. Thanks
Acai Berry Select 25th August 2010 08:21
hello, wholesale http://www.amandachina.com/
yiwu 26th August 2010 09:47
Nathan 26th August 2010 10:14
Polard 26th August 2010 10:14
Stephen 26th August 2010 10:15
Goody 26th August 2010 10:16
JosephM 27th August 2010 21:23
Ninja Saga 27th August 2010 22:21
this is a great article ^_^
thanks for shared
Health Care Insurance 28th August 2010 11:16
Wohnen Sessel 28th August 2010 11:43
Cheers on a great post, I’ve bookmarked and I look forward to future postings.
submit articles 30th August 2010 02:01
Useful information shared..I am very pleased to study this article..many thanks for giving us nice information.
replica jerseys 30th August 2010 03:34
louis vuitton 30th August 2010 04:42
Attractive post. I just stumbled upon your blogpost and wish to say that I have really enjoyed analysis your blog posts. Any way I'll be subscribing to your feed and I expect you post again shortly.
Astalavista Hacking 30th August 2010 04:42
JeremyNath 30th August 2010 04:44
Hey this is really nice information. I was looking for something similar like this. Thanks for this useful information.
How To Cut Your Own Hair 30th August 2010 07:24
Thanks for the nice post. I am expecting some different idea from your side. You always represent some new thought in your post.
How To get Rid Of Stretch Marks 30th August 2010 07:25
Discount Wholesale Electronics, Wholesale Cell Phones, Electronic Gadgets and More from the Best Dropship Wholesaler
Wholesale Electronics 30th August 2010 07:33
jimmy 30th August 2010 08:18
Its an amazing post, the information you delivered that is awesome would wait for your next such informative and interesting post.
Acai berry information 30th August 2010 09:53
Wholeheartedly for your sake,we sale the cheap shoes and others,if you want to know more,pls click my username. :)
cheap nike jacket and shoes 30th August 2010 18:02
maison de credit 1st September 2010 03:27
mivpl 1st September 2010 06:00
This website is awesome. I constantly come across something new & different right here. Thank you for that data.
louis vuitton purse 1st September 2010 07:19
Brandon Pavlov 1st September 2010 16:25
Greetings, I enjoy your blog. This is a nice site and I wanted to post a note to let you know, good job! Thanks
Juicy Couture 2nd September 2010 09:45
Compaq Presario 190336-001 Li-ion Battery maintenance suggestions so that you can laptop clientsWhile customers are purchasing Notebook battery pack the makers will say to these people the quantity of working hours that Laptop computer Battery pack pack can conclusion, decreasing reasons that promote towards the defectiveness of the Notebook computer Battery load up. Almost all of the notebook shoppers don't have any talked about complex material dell laptop battery charger amalgamated upon receiving the extra Living away from their Compaq Presario 190336-001 Notebook Battery group.
http://blogtext.org/delladapter/
ibm laptop battery 2nd September 2010 10:10