Making buttons - <button> or <div> ?

Question

Hi,

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?

Thanks

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. Even if your functionality requires JavaScript and there is no reasonable default behaviour you can assign to an <a>, use it regardless - 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 less your documents suffer from divitis.

Answer 2

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

Answer 3

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;
}

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

Answer 4

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

http://stackoverflow.com/questions/469059/button-vs-input-typebutton-which-to-use