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

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

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

Далее напишем для кнопки следующую 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);
}

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

__________________________________________________________________________________________________________________

скачать joomla | обновление joomla | модуль joomla | администрирование | seo продвижение | joomla магазиншаблоны сайтов

обратная связь 

При копировании материала ссылка на сайт joomla4.ru обязательна.