Natalie Downe

23 days 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!
Posted at 12:47 am on the 10th of June 2009. 17 Comments
- button
- css
- howto
- html
- http
- post
- technique
one month agoDinky pocketbooks: the command-line reference edition

I have fulfilled my intention from to create a dinky pocket book as a reference for useful terminal commands (see below). I'll be printing a set of these out for my colleagues to find on their desks next week.

The printable pdf can be found here, but if you are running safari — or a recent gecko build as now it also uses -moz-transform — you can print directly from the browser.

The HTML for the reference booklet together with some minor updates to the original booklet css can be found on github.

I rarely use the terminal so these are commands that I will find useful as a reference and some of these I always end up having to look up. It is not designed to be an exhaustive list but if you have any suggestions I would love to hear them!

Navigate the file tree

changing directory to dirname
```
cd dirname
```
move up a directory in the tree—dont forget you can drag a folder in from the finder to get a path to that directory.
```
cd ..
```
go back to the last directory I was in
```
cd -
```
where am I? (present working directory)
```
pwd
```
list what's in this directory
```
ls
```
now give me more information in the listing
```
ls -lah
```
ssh to server
```
ssh user@domain.com
```
Find & open

list all files recursively in subdomains
```
find .
```
find all files with '.css' in the name
```
find . | grep .css
```
find the string 'prose' in the contents of all the files in this directory
```
grep -r "prose" .
```
open a file as if you had double clicked it in the finder (mac only)
```
open filename
```
open the current directory in the finder
```
open .
```
make a directory called dirname
```
mkdir dirname
```
create a file called filename if it doesnt exist or update last modified date if it does
```
touch filename
```
Move, remove & copy

move or rename a file or directory
```
mv oldname newname
```
remove a file
```
rm filename
```
remove a directory and all its contents. BE VERY CAREFUL! you could easily delete everything!
```
rm -rf dirname
```
copy a file
```
cp oldfilename newfilename
```
copy a directory and everything in it
```
cp -r olddirname newdirname
```
securely copy a file to / on a remote server — you can also copy a directory using scp -r
```
scp file user@domain.com:
```
Subversion

check out a repository to the current directory
```
svn co http://domain.com/svn/ .
```
update local directory from repository
```
svn up
```
are there new or modified files?
```
svn status
```
add new files to the repository
```
svn add filename
```
remove a file from subversion
```
svn remove filename
```
mark a previously conflicted file as resolved
```
svn resolved filename
```
who changed what line number of this file
```
svn blame filename
```
commit all changes in this directory
```
svn commit -m "commit msg"
```
Subversion & download

is this directory checked out from svn? and where?
```
svn info
```
show everything that has changed
```
svn diff
```
show what has changed in one file
```
svn diff filename
```
open text editor in order to specify which files to ignore from svn
```
svn propedit svn:ignore .
```
download a file to the current directory
```
wget URL
```
show the contents of a file in the terminal
```
curl URL
```
Help & information

run any command as root
```
sudo your-command-here
```
get help for any command, eg svn
```
svn --help
```
how long has this computer been on?
```
uptime
```
what is the size of the current directory and all the contents
```
du -h
```
cancel the command you were currently typing
```
ctrl + c
```
go to the beginning of the line in the terminal
```
ctrl + a
```
go to the end of the line in the terminal
```
ctrl + e
```
Posted at 5:01 pm on the 23rd of May 2009. 3 Comments
- cmd
- command
- css
- css3
- gecko
- howto
- pocketbook
- reference
- terminal
- webkit
one month agoDinky pocketbooks with WebKit transforms

I'm a big fan of stuff written on paper. My computer is covered in useful post-it notes, and I do a lot of planning on paper at the start of every client-side build.

On my desk at work is a piece of paper written in felt tip that I pass around to my co-workers on occasion. It's a reference document for how we check projects out of subversion, upload to live and some basic terminal commands for people who are unfamiliar in that environment.

This was a great opportunity to break out my favourite paper folding technique, where an A4 page becomes an 8 page booklet. I first learnt about this from a Christmas card I received a few years ago from some very inventive friends.

Brian Suda happened to be in the office that day and pointed me to a cool Flash interface for creating these, pocketmod.com. He also suggested that it would be possible to build these using just HTML and CSS with CSS3 transforms, currently supported by Safari and WebKit.

Inspired, I did exactly that.

Here's the demo.html (no transforms, so I can easily preview the pages) - the transforms are applied by the print stylesheet, so hit "print preview" to see them. Alternatively, visit demo.html?print to preview the print stylesheet directly in your browser.

Just in case you aren't running Webkit or Safari, here's what the print output looks like:

Each "page" has a set width and height (241x370 px) and is absolutely positioned, but the real magic happens with the CSS3 transforms in the print stylesheet:
```
/* rotated left */
#page1, #page8, #page7, #page6 {
  -webkit-transform: translate(64.5px, -64.5px) rotate(-90deg);
}
/* rotated right */
#page2, #page3, #page4, #page5 {
  -webkit-transform: translate(-64.5px, -64.5px) rotate(90deg);
}
```
It's not enough just to rotate 90 or -90 degrees. This works fine if you are rotating something that is square because the rotation happens around the centre point. I wanted to rotate the rectangles around the corner to ensure they fitted snugly inside their parent container. The solution was to shift the position using a translate() transform. I could have done this with position: relative, but I opted for a transform since I was already using -webkit-transform for the rotation. 64.5px is worked out as (height - width) / 2.

You can fill each page with whatever you like, but make sure it fits or it will be clipped by the overflow: hidden applied to the page. The only required markup is as follows:
```
<div id="book">
  <div id="page1" class="page"></div>
  <div id="page2" class="page"></div>
  <div id="page3" class="page"></div>
  <div id="page4" class="page"></div>
  <div id="page5" class="page"></div>
  <div id="page6" class="page"></div>
  <div id="page7" class="page"></div>
  <div id="page8" class="page"></div>
</div>
```
I surround textual content with a <div class="inner"> to apply sensible padding without affecting the width of the page.

There are currently two special page types. An empty page with lines (suitable for hand-written notes) is achieved by applying a class of lines:
```
<div id="page5" class="page lines"></div>
```
The second special page uses the Google Static Maps API. The API takes a bunch of name value pairs, which I decided to represent using a definition list. On load, pages with the class gmap are scanned for definition lists, which are then hidden and replaced by an image constructed from the definition terms.
```
<div id="page4" class="page gmap">
  <dl>
    <dt>center</dt>
    <dd>50.8197155,-0.1365716</dd>
    
    <dt>key</dt>
    <dd>insert your Google Maps API key here (get one here)</dd>
    
    <dt>zoom</dt>
    <dd>13</dd>	
  </dl>
</div>
```
I use Simon's www.getlatlon.com to find the correct values.

Aside from these special pages, I've included styles for the HTML usual suspects - lists, tables, headings, pre etc. To make a todo list, simply apply a class of todo to a <ul> or an <ol>. To make a blank todo list, just use blank list items.

Once you've constructed and printed your dinky booklet masterpiece, you'll need to fold it. Here's a nifty video from pocketmod.com showing how:

I've published the code on GitHub, so please feel free try it out yourself or fork it and have a play. Let me know what you think.
Posted at 11:22 pm on the 21st of May 2009. 19 Comments
- css
- css3
- paper
- pocketbooks
- webkit
three months agoPractical, maintainable CSS

Continuing my new years resolution to get better at public speaking, I have now given two talks in 2009 and am signed up to two more. It really does get easier! The last one I gave was (in hindsight) really quite fun.

Last Wednesday I spoke about what I do to the Girl Geeks of Brighton at the Eagle. An event with a good community atmosphere and fantastic food, there were lots of new faces there too.

Here are my slides from the event, they contain some of the same material to my Barcamp presentation however its much more from a practical perspective aimed at an audience with a variable base level of knowledge in CSS.

If you are interested, the slides with notes are available online. I also used Silverback to record the presentation.

Video on Vimeo

Slides on Slideshare

If you see me about at SxSW next week, come and say hi :)
Posted at 11:05 pm on the 10th of March 2009. 2 Comments
- css
- csssystems
- girlgeeks
- html
- maintainability
- markup
- talks
eight months agoOvercoming my fear of public speaking

I'm flying high above southern France, the sun fresh in the sky and clouds hugging close to the ground below.

This afternoon I am speaking about CSS Systems to a waiting audience in Basel, Switzerland.

Two weeks ago I gave my first proper talk at BarCamp London 5. To experienced speakers this will sound strange but I was petrified to stand up and express opinions in front of possibly the friendliest audience there is, a group of about 25 supportive and interested friends.

I have possibly the most common phobia out there: the fear of public speaking. I had accepted it and come to terms with being the one who helps on the sidelines.

At BarCamps I would organise lightning talks, show and tells and IE6 debugging games, which was a great way of conforming to the required participatory nature of BarCamp without risking what I feared would be professional suicide.

Some of you will know that my partner Simon Willison is a very experienced and excitable speaker, so I am quite accustomed to the speaker circuit without being directly part of it and in fact most of my friends are experienced speakers as well.

It's not that I don't have anything to say, nor do I mind talking one to one or occasionally socially in small groups. I am excitable and opinionated. I am even OK on stage introducing speakers for things like Oxford Geek Nights. It's all the expectant faces staring back at you and the fear that I'm going to waste several minutes to an hour of their lives. I didn't have the conviction of my opinions: what if I was wrong?

I used to clam up. Once I was even told by someone that they were worried I had stopped breathing.

In January of this year I started working for Clearleft. There is a strong culture of community involvement, writing and speaking at conferences. Writing articles and community involvement were fine for me, but naturally I felt the implicit pressure to start actually speaking and not just organising games and lightning talks.

We had a speaking coach run a day's training for us which did really help but without having that put in to practice the fear was still there.

At BarCamp London — despite pressing a button on the remote that turned off the projector — everything went well and after I posted the slides, I was taken aback by the positive response to the content.

I firmly believe that if you are afraid of something, that's more reason to do it. What good is going through life only doing things you find easy? It's the only way you can really learn about yourself. Test your limits and don't give up.

The reaction to the content spurred me on to agree to this conference in Switzerland but the desire to face the fear and overcome it was the overpowering factor. It doesn't mean I'm not scared, but I can only do my best.

So go, do something that you are afraid of and you will be surprised at yourself.

Update: The talk in Switzerland went well. I was initially very scared, but got in to the swing of things and had some good feedback at the end. It was definitely worth doing.
Posted at 9:49 pm on the 14th of October 2008. 6 Comments
- basel
- conference
- fear
- speaking
- switzerland

Yesterday

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

1st July 2009

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

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

Peter-Paul Koch

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

Peter-Paul Koch

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

Wilson Miner

29th June 2009

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

SXSW

26th June 2009

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

Stephanie Sullivan

24th June 2009

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

23 days agoStyling buttons to look like links

one month agoDinky pocketbooks: the command-line reference edition

Navigate the file tree

Find & open

Move, remove & copy

Subversion

Subversion & download

Help & information

one month agoDinky pocketbooks with WebKit transforms

three months agoPractical, maintainable CSS

Video on Vimeo

Slides on Slideshare

eight months agoOvercoming my fear of public speaking

Yesterday

1st July 2009

29th June 2009

26th June 2009

24th June 2009

Other places I lurk