制作按钮 - <按钮>或<div>？

Question

我想知道在网页上使用什么html元素用于按钮 - 我想像twitter那样设置我的'按钮'.例如:

http://twitter.com/twitter

推文列表底部的"更多"按钮 - 是<button>元素还是<div>元素？我想知道使用哪个.我认为,<button>或者<div>我们可以提供翻转状态和所有这些东西,使它看起来愉快？

Answer 1

不要使用<div>标签来制作可点击元素.使用<a>或<button>元素.这使得禁用JavaScript的浏览器可以按预期与它们进行交互.即使您的功能需要JavaScript并且没有合理的默认行为,您也可以分配给<a>它,无论如何都使用它 - 它传达了"可点击"的语义.

一般情况下,选择最能描述其内容功能的标签,而不是其内容的外观,并避免使用不必要的<div>标签,以免文件遭受遗传.

Answer 2

Twitter上的"更多"按钮是<a>一个背景图像,CSS3圆角和边框.这是完整的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>

你应该使用<a>或<button>不使用<div>.