

When to make a button or a hyperlink? - jonny_eh

I've spent the last few hours learning how to make buttons in Photoshop for the web.<p>It got me thinking, when should I use a button or a hyperlink?<p>I don't think it's as simple as "Links open other pages, buttons do actions on the current page".<p>Any UX experts here have an opinion on this?<p>Any good examples of a button where a link should be or vice-versa?
======
malandrew
From a UX standpoint, I would go with the link to Luke Wroblewski's article on
primary and secondary actions.

From a semantic HTML standpoint, I use the following criteria when links and
buttons are both styled visually as buttons:

Link, <a> tag: Persistent resource. Is it something you can GET and expect to
be able to GET again in the future.

Button, <button> tag: An action modifying or changing a resource. Typically
performs a POST, PUT or DELETE. A successful result that isn't local (i.e.
client-side) will likely receive an object the was subject to the modification
performed when the button was pressed.

While there may be some conflict in the UX view and the semantic HTML view, I
would contend that a "cancel" link when it is a secondary action is often
unnecessary. In a modal dialog, the X icon in the top left or right corner
performs the same action. In a mobile interface, the back button (physical
like on an Android device or virtual like in iOS apps or the browser back
button) performs the same action as cancel. The only situation I can think of
where a "cancel" link like in LukeW's article makes sense is where the action
is an AJAX modification of the page, like when you "edit" a part of a question
on Quora for example. That's really one of the few times I can think of where
a "cancel" link next to an "Okay" button makes sense.

------
Hrundi
Check this out:

<http://www.lukew.com/resources/articles/psactions.asp>

Google does this a lot. Facebook too. Hope it helps!

------
glimcat
Button: persistent interface element or call to action

Link: supplemental resources

