Создание кнопок - <button> или <div>?

Ответ 1

Не используйте теги <div> для создания интерактивных элементов. Используйте элементы <a> или <button>. Это позволяет браузерам с отключенным JavaScript взаимодействовать с ними, как и ожидалось. Даже если для вашей функциональности требуется JavaScript и нет разумного поведения по умолчанию, вы можете назначить <a>, использовать его независимо - он передает семантику "clickable".

В общем, выберите тег, который наиболее точно описывает функцию его содержимого, а не внешний вид его содержимого, и избегайте ненужных тегов <div>, чтобы ваши документы не пострадали от divitis.

Ответ 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>

Ответ 3

Если вы хотите использовать <div> вместо <button> для редактора WYSIWYG или что-то еще, не забудьте добавить стили ниже, потому что тег <button> не удаляет выделение, но div делает.

Или это удивит вас неожиданным поведением:)

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Ответ 4

Используйте тег a вместо button. Мое рассуждение связано с проблемами совместимости со старой версией IE (IE6 ненавидит тег button).

<button> vs. < input type = "button" / > . Что использовать?

Ответ 5

В общем, вы хотите использовать <a> для навигации и <button> для некоторых действий, которые происходят на этом экране.

Лучшей причиной, по которой я могу думать, что тег <button> или <a> равен <anything-else>, заключается в том, что во время тестирования упрощается поиск подходящих элементов. Например, я использую Capybara и Rspec, а метод click_on работает намного надежнее, когда он ссылается на <button>, то же самое с метод click_link и <a>.

Другие причины, приведенные здесь, также хороши: семантика, экранные программы и т.д.

Прагматично, ваша аудитория решит, действительно ли каждый элемент вашей страницы действительно причудливый <div>, или если вы хотите хорошо играть с остальной частью веб-экосистемы. Это может просто зависеть от того, использует ли ваша аудитория X-браузер или нет.

Один из них: поскольку <button> может отправить форму или <a> перевести вас на другую страницу, вы должны быть уверены, что не допустите эти действия по умолчанию. В функции JavaScript, которая обрабатывает щелчок, вы должны указать, что он выполняет только действие, которое вы программируете.

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

Ответ 6

Я предлагаю <input id="Button1" type="button" value="button" /> с помощью стиля css, чтобы придать внешний вид, который вы ищете.