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

29 Апр
2012

Ранее был предложен вариант верстки растягивающихся кнопок типа «submit» и «button» для отправки формы на сервер без использования JavaScript. Однако в предложенном варианте было несколько существенных недостатков:
  1. Довольно много лишнего html-кода;
  2. Двойное дублирование текста кнопки.

Вообще, я сам не сторонник данного метода, так как его можно без проблем сделать и на CSS3 (для IE6-8 использовать PIE). Однако, действительно, встречаются случаи, когда, нарисованную дизайнером кнопку, невозможно сделать средствами CSS3.
Но речь не об этом. Предлагаю сделать растягивающуюся кнопку типа «submit» и «button» более изящным способом (с поддержкой ie6-8):

1) Картинки


Картинки для кнопок я позаимствовал у товарища оригинального поста. То есть, также три картинки: левое скругление, правое скругление и тянущаяся центральная часть.
image

2) Html-код


Html несколько меняется. Вместо input’a будем использовать тег button, он также может иметь тип «submit» и «button». А внутри него уже будем конструировать разметку самой кнопки.

<button type="submit">
<i class="bg_l"></i><span>Button</span><i class="bg_r"></i>
</button>


3) Css-код


Css-код будет слудующим:

button {
    display:inline-block;
    height:46px;
    border:none;
    background:none;
    white-space:nowrap;
    letter-spacing:0px;
    word-spacing:0px;
    font-size:0px;
    cursor:pointer;
}
button * {
    vertical-align:top;
}
button i {
    display:inline-block;
    width:21px;
    height:44px;
    zoom:1; /* IE6-7 не поддерживает  "display:inline-block" и данное свойство помогает решить эту проблему. При условии, что сам элемент инлайновый. (Или же в отдельном css-файле для IE6-7 можно указать button i {display:inline-block;})*/
}
button i.bg_l {
    background:url(../images/left_part_button.png) left top no-repeat;
}
button i.bg_r {
    background:url(../images/right_part_button.png) left top no-repeat;
}
button span {
    display:inline-block;
    height:44px;
    font-size:24px;
    line-height:44px;
    color:#fff;
    letter-spacing:normal;
    word-spacing:normal;
    background:url(../images/centr_part_button.png) left top repeat-x;
}

Заключение


В конечном счёте имеем кроссбраузерную кнопку с type=«submit» или type=«button» с поддержкой «всеми любимого IE6-8».
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх