WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Links vs buttons

for

Number of posts in this thread: 8 (In chronological order)

From: Rakesh
Date: Wed, Sep 11 2013 11:11PM
Subject: Links vs buttons
No previous message | Next message →

Hi all,

Most of the times I am confused where to use buttons and where to use
links. Tried researching on it but I could not get a solid answer.
I am very much interested in righting a blog on the same.

To me button is used when an action is associated with the element such
as 'Submit", "continue", "next", "cancel", Add to cart (in e-commerce
websites), Proceed", close" etc. Also when a pop-up opens to provide
context help "help", etc. While links are only used to connect the web
pages either through "href" or by calling some functions via
scripting.The other way to put it is input buttons are used wen a
visuall indication off buttton is provided on the page else use a link.

Is my understanding correct. Can you throw some light on it.

Thanks & Regards
Rakesh

From: Olaf Drümmer
Date: Thu, Sep 12 2013 1:35AM
Subject: Re: Links vs buttons
← Previous message | Next message →

Hi,

I would make a distinction between
changing where you are, by moving around in content that is there already
versus
changing the state or status of something

Buttons change something:
- create a list of search results
- submit a form
- go to the next step in a transaction (e.g. when ordering something online)
- …

Links are just navigational instruments - the stuff on the website is not changed, just your position in it changes when you follow links.

Borderline cases are links or buttons like "Next". If something is saying "Next" in the sense of next page of this article, I consider that a link, if something is saying "Next" because after selecting things for purchase you go to the payment step, this would be through a button.

Or in other words:

A button is an answer to the question "What can I do" whereas a link is an answer to the question "Where can I go".


Olaf


Am 12 Sep 2013 um 07:11 schrieb Rakesh < = EMAIL ADDRESS REMOVED = >:

> Hi all,
>
> Most of the times I am confused where to use buttons and where to use
> links. Tried researching on it but I could not get a solid answer.
> I am very much interested in righting a blog on the same.
>
> To me button is used when an action is associated with the element such
> as 'Submit", "continue", "next", "cancel", Add to cart (in e-commerce
> websites), Proceed", close" etc. Also when a pop-up opens to provide
> context help "help", etc. While links are only used to connect the web
> pages either through "href" or by calling some functions via
> scripting.The other way to put it is input buttons are used wen a
> visuall indication off buttton is provided on the page else use a link.
>
> Is my understanding correct. Can you throw some light on it.
>
> Thanks & Regards
> Rakesh
> > >

From: Cameron Cundiff
Date: Thu, Sep 12 2013 6:25AM
Subject: Re: Links vs buttons
← Previous message | Next message →

Olaf's description summarizes the topic nicely. I encourage you to check
out an expanded investigation by Karl Groves: Links are not buttons.
Neither are DIVs and
SPANs<http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/>;
.


On Thu, Sep 12, 2013 at 3:35 AM, Olaf Drümmer < = EMAIL ADDRESS REMOVED = > wrote:

> Hi,
>
> I would make a distinction between
> changing where you are, by moving around in content that is there
> already
> versus
> changing the state or status of something
>
> Buttons change something:
> - create a list of search results
> - submit a form
> - go to the next step in a transaction (e.g. when ordering
> something online)
> - …
>
> Links are just navigational instruments - the stuff on the website is not
> changed, just your position in it changes when you follow links.
>
> Borderline cases are links or buttons like "Next". If something is saying
> "Next" in the sense of next page of this article, I consider that a link,
> if something is saying "Next" because after selecting things for purchase
> you go to the payment step, this would be through a button.
>
> Or in other words:
>
> A button is an answer to the question "What can I do" whereas a link is
> an answer to the question "Where can I go".
>
>
> Olaf
>
>
> Am 12 Sep 2013 um 07:11 schrieb Rakesh < = EMAIL ADDRESS REMOVED = >:
>
> > Hi all,
> >
> > Most of the times I am confused where to use buttons and where to use
> > links. Tried researching on it but I could not get a solid answer.
> > I am very much interested in righting a blog on the same.
> >
> > To me button is used when an action is associated with the element such
> > as 'Submit", "continue", "next", "cancel", Add to cart (in e-commerce
> > websites), Proceed", close" etc. Also when a pop-up opens to provide
> > context help "help", etc. While links are only used to connect the web
> > pages either through "href" or by calling some functions via
> > scripting.The other way to put it is input buttons are used wen a
> > visuall indication off buttton is provided on the page else use a link.
> >
> > Is my understanding correct. Can you throw some light on it.
> >
> > Thanks & Regards
> > Rakesh
> > > > > > >
> > > >

From: Rakesh
Date: Thu, Sep 12 2013 8:51AM
Subject: Re: Links vs buttons
← Previous message | Next message →

Hi Olaf,

Thank you for your response. So, I take this from your explanation.
"Next" will be a button when I do a transaction or select items on a
shopping website etc.
"Next " will be a link if I have first 10 results available out of 100
and I need to hit next to get the next set of 10 results.

Hope my understanding is correct.

Thanks & Regards
Rakesh

On 9/12/2013 1:05 PM, Olaf Drümmer wrote:
> Hi,
>
> I would make a distinction between
> changing where you are, by moving around in content that is there already
> versus
> changing the state or status of something
>
> Buttons change something:
> - create a list of search results
> - submit a form
> - go to the next step in a transaction (e.g. when ordering something online)
> - …
>
> Links are just navigational instruments - the stuff on the website is not changed, just your position in it changes when you follow links.
>
> Borderline cases are links or buttons like "Next". If something is saying "Next" in the sense of next page of this article, I consider that a link, if something is saying "Next" because after selecting things for purchase you go to the payment step, this would be through a button.
>
> Or in other words:
>
> A button is an answer to the question "What can I do" whereas a link is an answer to the question "Where can I go".
>
>
> Olaf
>
>
> Am 12 Sep 2013 um 07:11 schrieb Rakesh< = EMAIL ADDRESS REMOVED = >:
>
>> Hi all,
>>
>> Most of the times I am confused where to use buttons and where to use
>> links. Tried researching on it but I could not get a solid answer.
>> I am very much interested in righting a blog on the same.
>>
>> To me button is used when an action is associated with the element such
>> as 'Submit", "continue", "next", "cancel", Add to cart (in e-commerce
>> websites), Proceed", close" etc. Also when a pop-up opens to provide
>> context help "help", etc. While links are only used to connect the web
>> pages either through "href" or by calling some functions via
>> scripting.The other way to put it is input buttons are used wen a
>> visuall indication off buttton is provided on the page else use a link.
>>
>> Is my understanding correct. Can you throw some light on it.
>>
>> Thanks& Regards
>> Rakesh
>> >> >> > > >

From: Greg Gamble
Date: Thu, Sep 12 2013 9:47AM
Subject: Re: Links vs buttons
← Previous message | Next message →

A rough rule is links are external and buttons are internal. There is some crossover, but not much.

Greg Gamble
SBCTC - Olympia | Information Services
p - 360-704-4376
 think before printing

From: Rakesh
Date: Sun, Sep 15 2013 5:35AM
Subject: Re: Links vs buttons
← Previous message | Next message →

Thank you all for the discussion. Here is the article after summarizing
the information.
http://www.maxability.co.in/2013/09/links-vs-buttons/

Thanks once again for your support.
Thanks & Regards
Rakesh

On 9/12/2013 9:17 PM, Greg Gamble wrote:
> A rough rule is links are external and buttons are internal. There is some crossover, but not much.
>
>
> Greg Gamble
> SBCTC - Olympia | Information Services
> p - 360-704-4376
>  think before printing
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Rakesh
> Sent: Wednesday, September 11, 2013 10:11 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Links vs buttons
>
> Hi all,
>
> Most of the times I am confused where to use buttons and where to use links. Tried researching on it but I could not get a solid answer.
> I am very much interested in righting a blog on the same.
>
> To me button is used when an action is associated with the element such as 'Submit", "continue", "next", "cancel", Add to cart (in e-commerce websites), Proceed", close" etc. Also when a pop-up opens to provide context help "help", etc. While links are only used to connect the web pages either through "href" or by calling some functions via scripting.The other way to put it is input buttons are used wen a visuall indication off buttton is provided on the page else use a link.
>
> Is my understanding correct. Can you throw some light on it.
>
> Thanks& Regards
> Rakesh
> > > > >

From: Karl Groves
Date: Mon, Sep 16 2013 10:39AM
Subject: Re: Links vs buttons
← Previous message | Next message →

I'd like to dispute the notion that "buttons are difficult to style". I
haven't done much extensive testing on <input type="submit"> and the like,
but the <button> element can be styled[1] or unstyled[2], as it were, to
meet your needs on most modern browsers. You may run into some issues
across browser but not anymore than any other CSS stuff.

1 - http://jsfiddle.net/W9tvq/

2 - http://jsfiddle.net/c54UY/


On Sun, Sep 15, 2013 at 7:35 AM, Rakesh < = EMAIL ADDRESS REMOVED = > wrote:

> Thank you all for the discussion. Here is the article after summarizing
> the information.
> http://www.maxability.co.in/2013/09/links-vs-buttons/
>
> Thanks once again for your support.
> Thanks & Regards
> Rakesh
>
> On 9/12/2013 9:17 PM, Greg Gamble wrote:
> > A rough rule is links are external and buttons are internal. There is
> some crossover, but not much.
> >
> >
> > Greg Gamble
> > SBCTC - Olympia | Information Services
> > p - 360-704-4376
> >  think before printing
> >
> >
> > -----Original Message-----
> > From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Rakesh
> > Sent: Wednesday, September 11, 2013 10:11 PM
> > To: WebAIM Discussion List
> > Subject: [WebAIM] Links vs buttons
> >
> > Hi all,
> >
> > Most of the times I am confused where to use buttons and where to use
> links. Tried researching on it but I could not get a solid answer.
> > I am very much interested in righting a blog on the same.
> >
> > To me button is used when an action is associated with the element such
> as 'Submit", "continue", "next", "cancel", Add to cart (in e-commerce
> websites), Proceed", close" etc. Also when a pop-up opens to provide
> context help "help", etc. While links are only used to connect the web
> pages either through "href" or by calling some functions via scripting.The
> other way to put it is input buttons are used wen a visuall indication off
> buttton is provided on the page else use a link.
> >
> > Is my understanding correct. Can you throw some light on it.
> >
> > Thanks& Regards
> > Rakesh
> > > > > messages to = EMAIL ADDRESS REMOVED =
> > > > > > >
> > > >



--

Karl Groves
www.karlgroves.com
@karlgroves
http://www.linkedin.com/in/karlgroves
Phone: +1 410.541.6829

From: Patrick H. Lauke
Date: Mon, Sep 16 2013 5:24PM
Subject: Re: Links vs buttons
← Previous message | No next message

On 16/09/2013 17:39, Karl Groves wrote:
> I'd like to dispute the notion that "buttons are difficult to style". I
> haven't done much extensive testing on <input type="submit"> and the like,
> but the <button> element can be styled[1] or unstyled[2], as it were, to
> meet your needs on most modern browsers. You may run into some issues
> across browser but not anymore than any other CSS stuff.
>
> 1 - http://jsfiddle.net/W9tvq/
>
> 2 - http://jsfiddle.net/c54UY/

I seem to remember quite a famous (as in, it made the rounds at the time
a few years ago) comparison page that showed major problems with buttons
containing image elements, and aligning the buttons consistently with
the baseline of text...but it seems to elude me at the moment. Most
likely the culprit at the time was IE6...

P

>
> On Sun, Sep 15, 2013 at 7:35 AM, Rakesh < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Thank you all for the discussion. Here is the article after summarizing
>> the information.
>> http://www.maxability.co.in/2013/09/links-vs-buttons/
>>
>> Thanks once again for your support.
>> Thanks & Regards
>> Rakesh
>>
>> On 9/12/2013 9:17 PM, Greg Gamble wrote:
>>> A rough rule is links are external and buttons are internal. There is
>> some crossover, but not much.
>>>
>>>
>>> Greg Gamble
>>> SBCTC - Olympia | Information Services
>>> p - 360-704-4376
>>>  think before printing
>>>
>>>
>>> -----Original Message-----
>>> From: = EMAIL ADDRESS REMOVED = [mailto:
>> = EMAIL ADDRESS REMOVED = ] On Behalf Of Rakesh
>>> Sent: Wednesday, September 11, 2013 10:11 PM
>>> To: WebAIM Discussion List
>>> Subject: [WebAIM] Links vs buttons
>>>
>>> Hi all,
>>>
>>> Most of the times I am confused where to use buttons and where to use
>> links. Tried researching on it but I could not get a solid answer.
>>> I am very much interested in righting a blog on the same.
>>>
>>> To me button is used when an action is associated with the element such
>> as 'Submit", "continue", "next", "cancel", Add to cart (in e-commerce
>> websites), Proceed", close" etc. Also when a pop-up opens to provide
>> context help "help", etc. While links are only used to connect the web
>> pages either through "href" or by calling some functions via scripting.The
>> other way to put it is input buttons are used wen a visuall indication off
>> buttton is provided on the page else use a link.
>>>
>>> Is my understanding correct. Can you throw some light on it.
>>>
>>> Thanks& Regards
>>> Rakesh
>>> >>> >> messages to = EMAIL ADDRESS REMOVED =
>>> >>> >>> >>
>> >> >> >>
>
>
>


--
Patrick H. Lauke
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
twitter: @patrick_h_lauke | skype: patrick_h_lauke