Перейти к содержанию
Yuriy1987

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

Рекомендуемые сообщения

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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? чтоб он отдельно от стиля самой кнопки настраивался.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Тегу span не задано никакого наклона. Смотрите внимательней.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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>?

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Densport
      Здравствуйте, помогите, пожалуйста, разобраться, какие стили нужно поправить, либо каких не хватает, чтобы получилось:
       
      Выровнять два блока (цена и вес) по центру, (чтобы автоматически отцентрировались).
       
      Сейчас так: 
       

       
      Нужно чтобы получилось так:
       

       
      Как формируются блоки:
       
      - в коде html идет вывод в таком порядке:
      <div class="weight>за 1 кг</div> <div class="price">1 700 руб.</div> - css классы:
      .product .weight { color: #888; display: inline-block; float: right; font-size: 1em; font-weight: 500; line-height: 1.5em; margin: 2px 0 0; } .product .price { display: inline-block; font-size: 1.2em; font-weight: 500; line-height: 1em; margin: 2px 0 16px; } .product { text-align: left; } Я нашел решение, только при условии, если переписать вывод html (поменять местами блоки и вместо float:right сделать float:left и text-align:centr для класса .product). Тогда получается вывести по центру.
       
      НО, мне важно решить задачу, не меняя html, только стилями. (Потому, что если придется менять html, это нужно будет делать в 6-7 файлах, таких как поиск, категории, модули которые выводят товары типа акции, последние и т.д.)
       
      Если кто-то сталкивался с подобной задачей, или знает, как поправить стили, пожалуйста, подскажите!
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.