Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Links vs. Buttons Showdown

The Links vs. Buttons Showdown

Tonight! In a battle as old as the Internet, we’ll pit two HTML elements against each other in a crusade of better and worse, right and possibly wrong. One element is triggered with the Space bar; the other, with the Enter key. Who will win in this all-out free-for-all between LINKS vs BUTTONS?

Updated 11/16/17

Marcy Sutton

April 05, 2017

More Decks by Marcy Sutton

Other Decks in Programming


  1. •Navigate to a page or fragment with href •Cause a

    browser refresh •Deep-link client-rendered applications •Open in new windows with target •Activate with TAB and the Enter key •Show the URL in the status bar Characteristics of Links
  2. •Submit and reset forms • button, input[type=button] flavors •Trigger UI

    changes with JavaScript •Operable with TAB and the Space key Characteristics of Buttons
  3. •Focusability •Built-in semantics •Keyboard support for click() event listeners •Support

    for disabled •Submitting of forms Button elements Here’s what you get for free
  4. Whatever you do, In CSS: •Avoid * { outline: none;

    } •Discover outline-offset •Apply custom focus styles with :focus
  5. “The expected result of `Space` on a link element is

    to scroll the page” -Scott Vinkle
  6. What to do? •Research expected interactions. •Discuss URL changes in

    design reviews. •Weigh design vs. utility of HTML elements. •Match form to function. •Annotate semantics in wireframes. •Annotate interaction modes, i.e. focus.
  7. what about Legacy Sites? •Designs get entrenched–you may not have

    the luxury of going back to fix old patterns. •Use refreshes and agile stories as opportunities to make changes. •Use CSS classes to ease the transition.
  8. The Final Smackdown •Use links for navigation •Utilize buttons for

    toggling, submitting things •Echo function with visual style •Preserve focus styles for keyboard users •Make the most informed choices you can! •There might not always be a clear answer.