Как растягивать кнопку css

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

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

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

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

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. Добавил причину почему выбран именно этот метод.

Источник

Тянущаяся кнопка

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

Вот так выглядит схема создания нашего макета

Итак, с внешним видом определились! Теперь стоит определиться с требованиями для нашей кнопки, которые помогут создать оптимальный и валидный код:

• кнопка должна обладать «резиновыми» свойствами (растягиваться в зависимости от ширины текста);
• кнопка должна быть создана из тега input;
• кликабильность должна сохранятся по всему периметру кнопки (не только на тексте);
• для создания кнопки за основу берется HTML-код, без использования javascript;
• соблюдение всех стандартов;
• высокий показатель кроссбраузерности.

На первый взгляд кажутся бессмысленными эти мороки, но в итоге это может сохранить вам уйму времени. В первую очередь такое решение приносит гибкость в корректировании кода. Если каждая кнопка будет создана на одном коде, то для внесения коррективов в ее оформление потребуется работать с каждой из них индивидуально. Также каждая кнопка может называться по своему, поэтому мы ее создаем с тянущимися свойствами, в зависимости от длины текста названия. В тоже время использование единого макета кнопки будет экономить трафик для нашего ресурса.

Когда мы убедились в полезности принятого нами решения, следует рассказать, как это реализуется.

Просто длинный фон

Первое решение достаточно примитивное, но завоевывает внимание своим оригинальным подходом. Для начала следует создать в фотошопе 2 картинки, которые создадут фон кнопки и ее форму. Вам понадобится создать такие картинки

После чего создаем кнопку из тега input и устанавливаем фоном нашу картинку. В силу того, что картинка достаточно длинная, она займет нужное место в кнопке, а лишнее отсекается границами контейнера. Но чтобы левая часть выглядела также красиво, как и права, необходимо добавить вспомогательный блок, в который и войдет правая часть нашей кнопки. Кодовая часть нашего метода примет следующий вид:

div class="button"> input type="submit" value="" />Текст кнопки span>span> div>

.button  color: #fff; height: 23px; padding: 5px 6px 0 6px; background: url(img-button1) no-repeat; float: left; position: relative; overflow: hidden; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; /* указание параметра обязательно, так как input должен быть расположен выше */ top: 0; right: 0; overflow: hidden; > .button input  position: absolute; top: 0; left: 0; width: 100%; /* Растягиваем кнопку на всю ширину картинки */ height: 100%; opacity: 0; filter:progid:DXImageTransform.Microsoft. Alpha(opacity=0); /* прозрачность для ие6-7 */ cursor: pointer; border: none; z-index: 2; > html .button  height: 23px; /* для работы в ие6 */ >

Убедимся, что метод работает

При использовании такого метода стоит помнить о том, что:

• лечение для IE должно быть подключено через условные комментарии;
• лучше использовать не 2 разные картинки, а одну объединенную — спрайт.

Метод можно назвать почти универсальным. Его нельзя будет использовать только в том случае, если уголки кнопки не будут иметь своего фона и будут прозрачными.

Модифицируем первое решение

Как указывалось выше, первый способ не может быть реализован с прозрачными углами. Подумав над этой проблемой я нашел решение, которое позволяет устранить эту проблему. Для этого нужно внести некоторые коррективы в наш код:

div class="button"> input type="submit" value=" Текст кнопки " /> span>span> div>

.button  float: left; > .button div  position: relative; color: #fff; height: 23px; background: url(img-button1) no-repeat; > html .button div  width: 10px; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; top: 0; right: -6px; overflow: hidden; > .button input  height: 100%; cursor: pointer; margin: 0 -6px 0 0; padding: 2px 6px 5px 6px; overflow: visible; border: none; position: relative; z-index: 2; background: none; >

Если сделать все правильно, то результат получится такой же, как и в предыдущем методе.

В чем выигрывает этот метод?

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

Однако в тоже время имеют место некоторые недостатки:

Решение на CSS3

С выходом новой спецификации создание кнопки значительно упростилось. Теперь не требуется такой огромный код, а скругленные уголки легко реализуются с помощью свойства border-radius. Потребуется только немного подлечить старичка IE

input type="submit" value="текст кнопки" />

input  height: 23px; cursor: pointer; padding: 2px 6px 5px 6px; overflow: visible; border: none; background: # 7caee1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(path-to/PIE.htc); >

Преимущества использования этого метода на лицо! Код значительно меньше и проще, а главное полностью валиден. Результат в браузере будет точно такой же, как и в предыдущих способах.

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

Источник

Тянущаяся кнопка

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

Вот так выглядит схема создания нашего макета

Итак, с внешним видом определились! Теперь стоит определиться с требованиями для нашей кнопки, которые помогут создать оптимальный и валидный код:

• кнопка должна обладать «резиновыми» свойствами (растягиваться в зависимости от ширины текста);
• кнопка должна быть создана из тега input;
• кликабильность должна сохранятся по всему периметру кнопки (не только на тексте);
• для создания кнопки за основу берется HTML-код, без использования javascript;
• соблюдение всех стандартов;
• высокий показатель кроссбраузерности.

На первый взгляд кажутся бессмысленными эти мороки, но в итоге это может сохранить вам уйму времени. В первую очередь такое решение приносит гибкость в корректировании кода. Если каждая кнопка будет создана на одном коде, то для внесения коррективов в ее оформление потребуется работать с каждой из них индивидуально. Также каждая кнопка может называться по своему, поэтому мы ее создаем с тянущимися свойствами, в зависимости от длины текста названия. В тоже время использование единого макета кнопки будет экономить трафик для нашего ресурса.

Когда мы убедились в полезности принятого нами решения, следует рассказать, как это реализуется.

Просто длинный фон

Первое решение достаточно примитивное, но завоевывает внимание своим оригинальным подходом. Для начала следует создать в фотошопе 2 картинки, которые создадут фон кнопки и ее форму. Вам понадобится создать такие картинки

После чего создаем кнопку из тега input и устанавливаем фоном нашу картинку. В силу того, что картинка достаточно длинная, она займет нужное место в кнопке, а лишнее отсекается границами контейнера. Но чтобы левая часть выглядела также красиво, как и права, необходимо добавить вспомогательный блок, в который и войдет правая часть нашей кнопки. Кодовая часть нашего метода примет следующий вид:

div class="button"> input type="submit" value="" />Текст кнопки span>span> div>

.button  color: #fff; height: 23px; padding: 5px 6px 0 6px; background: url(img-button1) no-repeat; float: left; position: relative; overflow: hidden; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; /* указание параметра обязательно, так как input должен быть расположен выше */ top: 0; right: 0; overflow: hidden; > .button input  position: absolute; top: 0; left: 0; width: 100%; /* Растягиваем кнопку на всю ширину картинки */ height: 100%; opacity: 0; filter:progid:DXImageTransform.Microsoft. Alpha(opacity=0); /* прозрачность для ие6-7 */ cursor: pointer; border: none; z-index: 2; > html .button  height: 23px; /* для работы в ие6 */ >

Убедимся, что метод работает

При использовании такого метода стоит помнить о том, что:

• лечение для IE должно быть подключено через условные комментарии;
• лучше использовать не 2 разные картинки, а одну объединенную — спрайт.

Метод можно назвать почти универсальным. Его нельзя будет использовать только в том случае, если уголки кнопки не будут иметь своего фона и будут прозрачными.

Модифицируем первое решение

Как указывалось выше, первый способ не может быть реализован с прозрачными углами. Подумав над этой проблемой я нашел решение, которое позволяет устранить эту проблему. Для этого нужно внести некоторые коррективы в наш код:

div class="button"> input type="submit" value=" Текст кнопки " /> span>span> div>

.button  float: left; > .button div  position: relative; color: #fff; height: 23px; background: url(img-button1) no-repeat; > html .button div  width: 10px; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; top: 0; right: -6px; overflow: hidden; > .button input  height: 100%; cursor: pointer; margin: 0 -6px 0 0; padding: 2px 6px 5px 6px; overflow: visible; border: none; position: relative; z-index: 2; background: none; >

Если сделать все правильно, то результат получится такой же, как и в предыдущем методе.

В чем выигрывает этот метод?

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

Однако в тоже время имеют место некоторые недостатки:

Решение на CSS3

С выходом новой спецификации создание кнопки значительно упростилось. Теперь не требуется такой огромный код, а скругленные уголки легко реализуются с помощью свойства border-radius. Потребуется только немного подлечить старичка IE

input type="submit" value="текст кнопки" />

input  height: 23px; cursor: pointer; padding: 2px 6px 5px 6px; overflow: visible; border: none; background: # 7caee1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(path-to/PIE.htc); >

Преимущества использования этого метода на лицо! Код значительно меньше и проще, а главное полностью валиден. Результат в браузере будет точно такой же, как и в предыдущих способах.

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

Источник