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

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

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

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

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

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

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

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

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

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

HTML

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

CSS

.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 разные картинки, а одну объединенную — спрайт.

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

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

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

HTML

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

CSS

.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

HTML

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

CSS

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);
}

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

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