Кроссбраузерный button

Автор: Евгений Рыжков Дата публикации: 13.11.2009

Задача

Оформить кнопку следующим образом:

будущий результат

Требования:

  • использование тега <button> (в данном примере рассмотрен пример использование именно этого тега, иногда и он нужен)
  • надпись в кнопке должна быть текстом
  • кроссбраузерное отображение

Казалось бы задача очень простая. Пробуем способ, который первым приходит на ум:

<button>подопытная кнопка</button>

CSS:

button {
text-align: center;
color: #fff;
cursor: pointer;
width: 139px;
height: 27px;
background: url(path-to/button-back.png);
border: none;
font-weight: bold;
font-size: 11px;
padding: 0;
}

Получаем:

Кнопка в IE6
IE 6
Кнопка в Opera 10
Opera 10
Кнопка в FF 3.5
Firefox 3.5

Демонстрационный результат. Как видим текст в кнопке расположен не так как хотелось бы. Немного подправляем CSS:

button {
text-align: center;
color: #fff;
cursor: pointer;
width: 139px;
height: 27px;
background: url(path-to/button-back.png);
border: none;
font-weight: bold;
font-size: 11px;
padding: 7px 0 6px 0; /* чтобы выровнять надпись в Opera */
}
button::-moz-focus-inner { /* убираем внутренний отступ у кнопки в FF, который зарезервирован для рамки при фокусе */
padding:0;
border:0;
}

Результат. Если для кнопки нужна рамка при фокусе, следует воспользоваться псевдокласом focus. Проверено в: