Зачастую верстальщикам приходиться бороться с «дизайнерскими прелестями». Не исключением являются кнопки типа «submit» и «button». Необходимо выполнить вёрстку в соответствии с PSD макетом, да ещё и не забыть о чрезмерном расходе трафика и кроссброузерности страницы.
Проблемы как правило начинаются когда кнопка имеет скруглённые углы, хитрые границы и градиенты как на картинке выше.
Сегодня я хотел бы поделиться личным опытом решения данной задачи.
И так перейдём к решению:
Выбор данного решения обусловлен обязательным требованием корректного отображения в IE ниже 9-й версии (без css3).
1. Делим кнопку на 3 части: левое скругление, центральная полоска шириной в 1px и правое скругление:
2. Делаем «div» в котором будет находиться кнопка и задаём ему position: relative;
3. Далее «распихиваем» полученные png по тегам «div» и в центральном пишем текст с цветом «transparent» (это необходимо для того, что бы кнопка тянулась на требуемую ширину);
.button .left_part {
width: 21px;
height: 44px;
background-image: url(../images/left_part_button.png);
float: left;
}
.button .centr_part {
height: 44px;
background-image: url(../images/centr_part_button.png);
float: left;
font-size: 24px;
line-height: 41px;
color: transparent;
position: relative;
z-index: 0;
}
.button .right_part {
width: 21px;
height: 44px;
float: left;
background-image: url(../images/right_part_button.png);
4. Следующим шагом добавляем сам «submit», оборачиваем его в «div» шириной 1px, задаём ему width: 100% и position: absolute, стилизуем в соответствии с высотой цветом шрифта и т.д. Полученное помещаем перед 3-мя частями кнопки.
Вроде всё работает «как надо», но когда в игру вступает ветеран IE появляется проблема,
IE не понимает color: transparent. Текст который в «submit» и центральном «div» не накладываются идеально. Я подобрал цвет схожий с фоном кнопки, в моей ситуации это было достаточно просто.
В итоге мы получаем кроссбраузерную тянущуюся кнопку «submit» как в примере.
Исходники
Демо
UPD. Добавил причину почему выбран именно этот метод.