Making buttons - or ?

Question

I'm wondering what html element to use for buttons on a web page - I'd like to style my 'buttons' like twitter does. For example:

http://twitter.com/twitter

the "more" button at the bottom of the tweet listing - is that a <button> element, or a <div> element? I'd like to know which to use. I think for either <button> or <div> we can supply rollover states and all that stuff to make it look pleasant?

Answer 1

Don't use <div> tags to make clickable elements. Use <a> or <button> elements. This enables browsers with JavaScript disabled to interact with them as expected, in addition to a host of other benefits listed below. Even if your functionality requires JavaScript and there is no reasonable default behaviour you can assign to an <a> or <button>, use it anyways - it conveys "clickable" semantics.

In general, choose the tag that most closely describes the function of its content, not the appearance of its content, and avoid unnecessary <div> tags lest your documents suffer from divitis.

Because "it requires JavaScript on the client" is usually rejected out of hand as a reason for doing anything, in 2023, here are a few examples of behavior you're breaking by choosing <div> over a <button>/<a> tag. Some of this functionality can be restored with specific additional work, but that is often overlooked, and again, this is extra work to achieve feature-parity with what you get by default when using the correct <button> or <a> element:

• Your <div> cannot be navigated to with the keyboard or by many accessibility devices, making your site fundamentally inaccessible to people who cannot easily use a mouse, or people who simply prefer a keyboard
• Your <div> is not surfaced as an interactive element by screen-reader software, again, making it inaccessible by people with vision impairments
• Your <div> doesn't show where it will take the user in the status bar of the browser, <a> does
• Your users cannot middle-click or ctrl-click your <div> to open the link in a new tab, or a new window, the way they can with <a>
• Search engines cannot (easily) follow your <div> from page to page to index your content
• It's generally a given that you will apply a significant amount of styling to make your <div> look like a button or anchor tag, but again: Extra work to achieve feature-parity.

In short, it unambiguously good to use <a> or <button> over <div>: It costs you nothing, with no downside, and is important for a non-zero number of your users. Nobody has ever said "Oh good, this element is a div, not a button", however, lots of people say "Oh no, this element is a div when it should have been an anchor tag, now I can't use this site".

Answer 2

The "more" button on Twitter is an <a> with a background-image, CSS3 rounded corners, and a border. Here's the complete CSS (elem is <a class="more round">):

 .more {
      outline: none;
      display: block;
      width: 100%;
      padding: 6px 0;
      text-align: center;
      border: 1px solid #ddd;
      border-bottom: 1px solid #aaa;
      border-right: 1px solid #aaa;
      background-color: #fff;
      background-repeat: repeat-x;
      background-position: left top;
      font-size: 14px;
      text-shadow: 1px 1px 1px #fff;
      font-weight: bold;
      height: 22px;
      line-height: 1.5em;
      margin-bottom: 6px;
      background-image: url('/images/more.gif');
    }
    
    .more:hover {
      border: 1px solid #bbb;
      text-decoration: none;
      background-position: left -78px;
    }
    
    .more:active {
      color: #666;
      background-position: left -38px;
    }
    
    .round {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
    }

<a href="#" class="more round">Sample Button</a>

You should use <a> or <button>, not <div>.

Answer 3

In general you want to use <a> for navigation and <button> for some action that takes place on that screen.

The best reason I can think of to prefer a <button> or <a> tag to <anything-else> is that during testing, it makes it easier to locate the actionable items. I use Capybara and Rspec for example, and the method click_on works a lot more reliably when it refers to a <button>, the same with the method click_link and <a>.

The other reasons given here are also good: semantics, screen readers, etc.

Pragmatically, your audience will decide if every single element on your page is a really fancy <div> or if you want to play nice with the rest of the web dev ecosystem. It may simply depend on whether your audience all uses X browser or not.

One gotcha: Since a <button> could submit a form or <a> take you to another page, you have to make sure to prevent those default actions. In the JavaScript function that handles the click, you have to specify that it only does the action you program.

function onClickEvent(e)
{
  e.preventDefault();
  // What you want to do instead
}

Answer 4

Use an a tag instead of button. My reasoning involves compatibility issues with older version of IE (IE6 hates the button tag).

<button> vs. <input type="button" />. Which to use?

Answer 5

I'd suggest <input id="Button1" type="button" value="button" /> with a css style to give the appearance that you're looking for.