Natalie Downe's Weblog

A quote from Tom Morris

2009-07-02T00:18:18-07:00

"I love you, Verified by Visa, you protect my credit card details from tigers and from MRSA!"

OMG KITTENS! Colorado Biologists Discover Litter of Lynx Kittens : TreeHugger

2009-07-01T05:45:54-07:00

OMG KITTENS! Colorado Biologists Discover Litter of Lynx Kittens : TreeHugger. awwwwww! 10 baby Lynx kittens discovered in Colorado, so cute! (was searching for the Lynx web browser and got distracted)

A quote from Peter-Paul Koch

2009-07-01T05:20:38-07:00

Some mobile WebKits don't show an <input type="search" />, either. iPhone does, though (as a normal text box).

- Peter-Paul Koch

A quote from Peter-Paul Koch

2009-07-01T05:19:29-07:00

Interestingly, most mobile WebKits do not show an <input type="range" /> at all (no normal text box either).

- Peter-Paul Koch

A quote from Wilson Miner

2009-06-30T17:08:28-07:00

Oh, look it's the EveryBlock source code. http://blog.everyblock.com/2009/jun/30/source/

- Wilson Miner

A quote from SXSW

2009-06-29T12:33:20-07:00

You'd better hurry up and send us your panel proposals through Panelpicker! http://www.sxsw.com/node/1850

- SXSW

A quote from Stephanie Sullivan

2009-06-25T19:55:37-07:00

Turtle parking only. http://twitpic.com/8fnnp

- Stephanie Sullivan

The Fallacy of Page Zooming

2009-06-24T08:17:05-07:00

The Fallacy of Page Zooming. Top notch article by Drew, I couldn't agree more with his arguments for not using px.

Travel full-time for less than $14,000 per year

2009-06-22T09:45:18-07:00

Travel full-time for less than $14,000 per year. Fantastic article on traveling, slightly misleading title but the article is by a travel writer who spends her life living what she writes. Loads of useful tips for travels of all lengths, for weekends away and living the travel lifestyle.

A quote from Paul Boag

2009-06-22T03:43:30-07:00

I am beginning to think this hate campaign against IE6 has gone too far - http://tinyurl.com/nqngqx - browsers have feelings too!

- Paul Boag

Workshops | dConstruct 2009

2009-06-22T03:28:19-07:00

Workshops | dConstruct 2009. Early bird tickets have just gone on sale for this year's dconstruct tickets at £345. I am running an HTML5 and CSS3 workshop with Richard and Jeremy. "HTML5 and CSS3 may be considered by some as distant concepts: far in the future and irrelevant to their daily lives. However, in this day-long workshop by Clearleft's expert client-side engineers Richard Rutter, Jeremy Keith and Natalie Downe, you will learn how these exciting new concepts can be applied today!"

A quote from Stephen Fry

2009-06-19T11:22:32-07:00

My Guardian review of the 3GS seems to be out early! http://bit.ly/MDj6W Fuller review on my website in two shakes of a doubly shaky thing.

- Stephen Fry

A quote from Hickensian

2009-06-19T01:13:24-07:00

What IS it with Woodlice?

- Hickensian

A quote from Alex Kemp

2009-06-18T09:53:26-07:00

is shocked that my MP, Tony Lloyd, claimed for Kit Kat chunky mints on expenses. Tsk.

- Alex Kemp

A quote from Simon Willison

2009-06-18T07:29:39-07:00

Just launched: Come and audit your MP with the Guardian's MP expenses crowdsourcing app! http://mps-expenses.guardian.co.uk/

- Simon Willison

A quote from Mark Hurrell

2009-06-18T04:56:55-07:00

@simonw & @natbat saving UK democracy at stupid o'clock this morning http://twitpic.com/7pbmv

- Mark Hurrell

A quote from C4 Newsroom blogger

2009-06-18T02:46:56-07:00

Overheard in the newsroom: "Redacted is a banned word on tonight's prog..."

- C4 Newsroom blogger

A quote from Matt Webb

2009-06-18T02:11:19-07:00

Beers cans were devised for two glassfuls, for a wife and husband to drink at home together (from an Intro. to Industrial Automation, 1962.)

- Matt Webb

A quote from Luke Wroblewski

2009-06-15T12:56:54-07:00

All my notes from #uxlondon today: http://www.lukew.com/ff/archive.asp

- Luke Wroblewski

A quote from Jeremy Keith

2009-06-10T03:01:30-07:00

The implementation of http://addons.mozilla.org reaffirms my opinion that @natbat is the best front-end developer I know.

- Jeremy Keith

A quote from Richard Rutter

2009-06-10T02:55:29-07:00

new Clearleft-designed http://addons.mozilla.org launched. Design by newboy @paulrobertlloyd, HTML&CSS templates by the ever awesome @Natbat

- Richard Rutter

Styling buttons to look like links

2009-06-09T17:47:34-07:00

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!

A quote from Paul Annett

2009-06-07T01:45:13-07:00

Beautiful baby Casper 8lb13, born at 8.54am to wonderful mummy @RellyAB, naturally & without painrelief :) say hello world!

- Paul Annett

A quote from Natalie

2009-06-06T10:15:45-07:00

Had an awesome time at #devfort with @cackhanded @garethr @han @jaylett @memespring @mhasler @rnalexander @simonw @stevemarshall @stevena0

- Natalie

A quote from Stephanie Sullivan

2009-06-06T09:35:11-07:00

Success is going from failure to failure without a loss of enthusiasm. ~Churchill

- Stephanie Sullivan

A quote from Ryan Alexander

2009-06-06T03:54:27-07:00

OH: Why would someone steal only the 'H's off of signs? Maybe they're a model helicopter enthusiast.

- Ryan Alexander

A quote from Steve Downe

2009-05-26T01:34:43-07:00

Knowledge is knowing a Tomato is a fruit. Wisdom is knowing not to put it in a fruit salad

- Steve Downe

A quote from Chris Messina

2009-05-25T14:34:31-07:00

Sigh, laundry. The hapless consequence of being clothed.

- Chris Messina

A quote from Justine Sanderson

2009-05-25T14:22:59-07:00

Great study on the value of personas in design: http://bit.ly/ILDN0 . Some methodological flaws, but we need more of this stuff.

- Justine Sanderson

A quote from Thomas Fuchs

2009-05-25T13:01:04-07:00

Browser layout engines don't get better when they age, IE's is now 12 years old.

- Thomas Fuchs