Pull to refresh

Тяни меня полностью или как растягивать «submit» и «button»

Reading time 2 min
Views 6.8K
image


Зачастую верстальщикам приходиться бороться с «дизайнерскими прелестями». Не исключением являются кнопки типа «submit» и «button». Необходимо выполнить вёрстку в соответствии с PSD макетом, да ещё и не забыть о чрезмерном расходе трафика и кроссброузерности страницы.

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


И так перейдём к решению:

Выбор данного решения обусловлен обязательным требованием корректного отображения в IE ниже 9-й версии (без css3).


image

1. Делим кнопку на 3 части: левое скругление, центральная полоска шириной в 1px и правое скругление:
image

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 появляется проблема,
image

IE не понимает color: transparent. Текст который в «submit» и центральном «div» не накладываются идеально. Я подобрал цвет схожий с фоном кнопки, в моей ситуации это было достаточно просто.

В итоге мы получаем кроссбраузерную тянущуюся кнопку «submit» как в примере.

Исходники
Демо

UPD. Добавил причину почему выбран именно этот метод.
Tags:
Hubs:
-8
Comments 62
Comments Comments 62

Articles