Кроссбраузерный button
Автор: Евгений Рыжков Дата публикации:
Задача
Оформить кнопку следующим образом:
Требования:
- использование тега <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;
}
Получаем:
 IE 6 |
 Opera 10 |
 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. Проверено в: