Jump to content
Sign in to follow this  
Yuriy1987

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

Recommended Posts

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By 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 файлах, таких как поиск, категории, модули которые выводят товары типа акции, последние и т.д.)
       
      Если кто-то сталкивался с подобной задачей, или знает, как поправить стили, пожалуйста, подскажите!
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.