В статье рассказано, как создать кнопку с помощью тега button таким образом, чтобы она отображалась во всех браузерах одинаково.

В предыдущей статье, посвященной теме создания кнопок, мы научились создавать кроссбраузерную кнопку на базе тега input. Однако иногда требуется кнопка, которая состоит из тега button. Сегодня мы рассмотрим, как это можно сделать.

Выглядеть наша кнопка должна следующим образом:

При этом должны быть соблюдены следующие требования:

• кнопка должна быть создана на основе тега button;
• название кнопки должно быть текстовое;
• во всех браузерах кнопка должна отображаться одинаково.

На первый взгляд рассматриваемый процесс не должен вызвать никаких трудностей, однако камнем преткновения становится последний пункт наших требований. Рассмотрим практический пример. Сначала, для сравнения, воспользуемся простейшим способом:

HTML

<button>Текст кнопки</button>

CSS

button {
    text-align: center; /*определяем текст кнопки по центру*/
    color: #fff; /*красим его в белый*/
    width: 139px;/*фиксируем четко ширину*/
    height: 27px;/*аналогично и с высотой*/
    background: #7caee1;/*задний фон кнопки пусть будет синим*/
    border: none;/*никаких границ*/
    padding: 0;/*никаких отступов*/
}

В результате чего в разных браузерах получим следующую картину:

Что и требовалось доказать! Последний пункт требований не соблюден, каждый браузер по-своему отобразил нашу кнопку. Поэтому наш код нуждается в небольшой модификации, чтобы устранить этот нежелательный эффект.

CSS

button {
    text-align: center;/*определяем текст кнопки по центру*/
    color: #fff;/*красим его в белый*/
    width: 139px;/*фиксируем четко ширину*/
    height: 27px;/*аналогично и с высотой*/
    background: #7caee1;/*задний фон кнопки пусть будет синим*/
    border: none;/*никаких границ*/
    padding: 7px 0 6px 0; /*равнение текста по высоте*/
}
button::-moz-focus-inner { /*колдуем для Firefox*/
    padding:0;
    border:0;
}

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

Подводя итог

Итак, получаем одинаковое отображение функциональной клавиши во всех популярных браузерах. Теперь можно констатировать, что поставленная задача решена, мы создали кроссбраузерную кнопку на безе button.

В каких браузерах работает?