Резиновый фон для кнопок в формах

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

Сначала приготовим картинки для фона. Оптимальным вариантом сделаем их в виде спрайта.

Получится что то типа этого:

Далее напишем для кнопки следующую html разметку:

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

Теперь с помощью CSS придадим кнопке необходимый вид:

.button {
	float: left; /* требуется для того, чтобы ширина кнопки зависела от контента (по желанию применить display: inline-block) */
	margin: 50px; /* устанавливаем необходимые внешние отступы, требуемые по дизайну */
}
.button div {
	position: relative;
	color: #fff;
	height: 27px;
	background: url(path-to/button.png) no-repeat; /* левые углы фона с прозрачными участками */
	font-size: 11px;
}
* html .button div { /* хак для ие6 чтобы с шириной кнопки проблем не было */
	width: 10px;
}
.button span { /* правое скругление кнопки выносим за пределы кнопки */
	background: url(path-to/button-r.png);
	height: 27px;
	width: 6px;
	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; /* убираем не обнуляемые внутренние отступы для ie6-7 */
	border: none;
	position: relative;
	z-index: 2;
	background: none;
}

Вот в общем то и все - любуемся результатом.

Вариант второй - CSS3

Было бы совсем неправильно не упомянуть о закруглении углов с помощью css3. Без костылей для IE, конечно же, не обойтись, но этот вариант сегодня уже имеет полное право на использование в рабочих проектах (к тому же он значительно упрощает реализацию поставленной задачи).

В данном случае html разметка не требует никаких дополнительных оберток:

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

CSS так же заметно поубавился

input {
	height: 27px;
	cursor: pointer;
	padding: 2px 6px 5px 6px;
	overflow: visible;
	border: none;
	background: url(img/button-repeat.png) repeat-x;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;    
}

Для IE как вариант используем плагин PIE. Тяжеловат, но со своей задачей справляется. Подключаем плагин и прописываем для input еще одну строку:

input {
    behavior: url(path-to/PIE.htc);
}

Должно получиться нечто подобное: