Как нарисовать кнопку

Discussion in 'PHP' started by rudi, 25 Mar 2017.

  1. rudi

    rudi Active Member

    Joined:
    3 Jun 2010
    Messages:
    492
    Likes Received:
    186
    Reputations:
    5
    Привет.
    Задача нарисовать такую кнопку
    [​IMG]
    То есть кнопка с надписью и три треугольника с правового края, у которых можно менять цвет, положение и так далее.

    Требование к коду.
    Разрешается добавлять классы для кнопки, и никаких вложенных блоков.
    То есть код может быть таким:
    HTML:
    <a class="myClass1 myClass2 myClass3 ..." href="#">Моя ссылка</a>
    Тут на помощь приходят ::before и ::after
    Но он позволяют вставить 2 псевдо-элемента, а мне нужно 3 !!!
    У кого какие идеи?
    Прикладываю полный код
    http://codepen.io/anon/pen/QpxOgL
     
  2. WarEnek

    WarEnek Banned

    Joined:
    26 Mar 2017
    Messages:
    3
    Likes Received:
    0
    Reputations:
    0
    Более псевдоэлементов не завезут. Нет ли возможности использовать js для помещения доп. элементов внутрь ссылки, тогда бы можно было сделать.
     
  3. Wetal

    Wetal New Member

    Joined:
    6 Mar 2013
    Messages:
    42
    Likes Received:
    0
    Reputations:
    0
    А зачем вам рисовать кнопку? Не лучше ли использовать онлайн-генератор кнопок? Этот например.
     
  4. rudi

    rudi Active Member

    Joined:
    3 Jun 2010
    Messages:
    492
    Likes Received:
    186
    Reputations:
    5
    Этот вопрос нужно задать дизайнерам.
     
    HeReTiC likes this.
  5. FriLL

    FriLL Member

    Joined:
    14 Sep 2008
    Messages:
    90
    Likes Received:
    24
    Reputations:
    8
    А картинку с событием OnClick нельзя использовать??
     
  6. HeReTiC

    HeReTiC Member

    Joined:
    21 Sep 2007
    Messages:
    18
    Likes Received:
    42
    Reputations:
    8
    Сделай не вложенный блок, а поверх данной кнопки и прозрачность поставь, вот тебе и плюс еще два псевдоэлемента.

    Другого варианта не вижу, если только с SVG что-то мутить.
    Надеюсь помог чем смог.

    [​IMG]
     
    rudi likes this.