Стиль кнопки. Нужен совет бывалого верстальщика.

[Yuriy1987]

Приветствую! Подскажите как можно оформить кнопку в виде параллелограмма. Те боковые стороны должны быть наклонными. Проблема в том, что с помощью transform: skewX наклоняется так же и текст кнопки (значение value). Интересует именно наклон а не использование изображение в качестве кнопки.

Может кто нибудь сталкивался со схожей ситуацией?

Заранее благодарен!

[Yuriy1987]

Спасибо! Может я не понятно выразился, вот так выводится кнопка

<div class="zvonok">
<input class="button" type="button" value="Закзазть звонок">
</div>

вот стиль

input.button {
    border: 1px solid #600E09;
    color: #FFFFFF;
    font-family: arial;
    font-size: 18px;
    font-style: italic;
    margin: 0;
    padding: 3px 12px;
    text-shadow: 0 0 2px #A10808;
    transform: skewX(-15deg);
    background: linear-gradient(to bottom, #EC9D00 0%, #B52800 100%) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 2px #DDDDDD;
    cursor: pointer;
}

вот как должно быть ссылка

 

получается так, что шрифт тоже наклоняется. Его можно выровнять задав transform: skewX(15deg) для value.

Но как задать стиль value? чтоб он отдельно от стиля самой кнопки настраивался.

[Yuriy1987]

А именно с кнопкой можно сделать? Это понятно, что тегу спан можно задать обратный наклон, я в меню со ссылками так и сделал.

Там тегу li задал наклон в -15 град а тегу li.a обратный наклон. А вот для value не получается... весь интернет перерыл, не нашел. Может быть плохо искал...

[Yuriy1987]

Ой, не доглядел код, завтра попробую, напишу результат

[xds]

Беда в том, что к элементам input нельзя применить псевдоклассы :before и :after.

Единственный вариант - делать кнопку прозрачной и оборачивать ее в обертку. А над оберткой уже изгаляйтесь как хотите :)

[Yuriy1987]

Вот так сделал.

<div class="zvonok">
<input class="button" type="button" value="Закзазть звонок">
</div>

.button{
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    font-family: arial;
    font-size: 14px;
    font-style: italic;
    margin: 0;
    transform: skewX(10deg);
  cursor:pointer;
}
.zvonok{
 background: none repeat scroll 0 0 #a9a9a9;
 border: 1px solid;
 border-radius: 5px;
    cursor: pointer;
    padding: 0;
    text-align: center;
    transform: skewX(-10deg);
    width: 140px; 
  cursor:pointer;
}

Внешне все так вроде, только стоит ли button обернуть тегом span, и все это дело будет вложено в <div class="zvonok">

те так: <div class="zvonok"><span><input class="button" type="button" value="Закзазть звонок"></span></div>?

Или можно оставить как есть?