Помогите, пожалуйста, сверстать кнопку.

Тема в разделе "Верстка", создана пользователем Seraferer, 25 июн 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Seraferer

    Seraferer Создатель

    Заблокирован
    Регистр.:
    18 дек 2014
    Сообщения:
    18
    Симпатии:
    0
    Доброго времени суток! Дизайнеры нарисовали заумную кнопку, а у меня на это ума не хватает. Наглости просить готовый стиль не хватает, но можете хотя бы подсказать в какую сторону копать? Заранее большое спасибо!
     

    Вложения:

    • 123.jpg
      123.jpg
      Размер файла:
      6,6 КБ
      Просмотров:
      39
  2. igorenia

    igorenia Постоялец

    Регистр.:
    12 окт 2013
    Сообщения:
    97
    Симпатии:
    72
    В голову приходит только сделать картинкой (background-image), а при наведении другую картинку (нажатую).
     
  3. Amazko

    Amazko # Слово Пацана

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    678
    Симпатии:
    392
    максимум что вы можете с нее сверстать ето название и стрелочку, а на все остальное 100% надо рисунок. У меня есть такие кнопки, ща скину )
    075-Unique-Green-&-Blue-Buttons.jpg
    Перейти по ссылке
     
  4. Seraferer

    Seraferer Создатель

    Заблокирован
    Регистр.:
    18 дек 2014
    Сообщения:
    18
    Симпатии:
    0
    Перейти по ссылке
    То есть на чистом CSS вообще не вариант? Нашёл что-то такое Перейти по ссылке но мне сложно применить это к данному рисунку.
     
  5. Amazko

    Amazko # Слово Пацана

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    678
    Симпатии:
    392
    если на чистом css то разве плагин есть дял фотошопа Css hat он може тстили стянуть.
     
  6. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    55
    Перейти по ссылке
    чтото такое замутил, только левый изогнутый край как мне кажется уж точно не реально смастерить.
    но это совсем черновой вариант, надо конечно допиливать. в принципе там должно быть понятен вектор направления. в a:after только надо будет еще фонтавесом какойнить вставить со стрелкой.
     
    Seraferer нравится это.
  7. Seraferer

    Seraferer Создатель

    Заблокирован
    Регистр.:
    18 дек 2014
    Сообщения:
    18
    Симпатии:
    0
    фотошоп 2015 может бес плагинов всё стянуть. Перейти по ссылке
    Большое спасибо! Будем допиливать
     
  8. EuRo1985

    EuRo1985 Постоялец

    Регистр.:
    21 апр 2015
    Сообщения:
    99
    Симпатии:
    7
    А смысл тут CSS-а? через background гораздо проще, быстрее и в данном случае, мне кажется правильнее.
     
  9. perfectartyshock

    perfectartyshock Создатель

    Регистр.:
    9 сен 2014
    Сообщения:
    32
    Симпатии:
    10
    Я бы не рекомендовал использовать градиенты в таком случае. Если все пункты меню имеют одну длину и ширину фона, то проще в коснтрукци ul > li > a (98% меню стрятся по такому принципу), к li применять background image (фон без текста и стрелочки внутри), а к ссылке применть text-shadow и бекграунд со стрелочой. В качестве ховера можно менять цвет стрелочки, либо с помощью backgroun-position само расположение
     
  10. semio

    semio Создатель

    Регистр.:
    24 сен 2014
    Сообщения:
    11
    Симпатии:
    0
    Та вроде бы не сложно через div, div:hover div сделать.

    О реализации. Мог бы сделать, но нужны исходники.
     
    Последнее редактирование модератором: 13 июл 2015
Статус темы:
Закрыта.