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

[Seraferer]

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

 

[igorenia]

В голову приходит только сделать картинкой (background-image), а при наведении другую картинку (нажатую).

 

[Seraferer]

максимум что вы можете с нее сверстать ето название и стрелочку, а на все остальное 100% надо рисунок. У меня есть такие кнопки, ща скину )

Для просмотра ссылки Войди или Зарегистрируйся
То есть на чистом CSS вообще не вариант? Нашёл что-то такое Для просмотра ссылки Войди или Зарегистрируйся но мне сложно применить это к данному рисунку.

 

[vytyacom]

Для просмотра ссылки Войди или Зарегистрируйся
чтото такое замутил, только левый изогнутый край как мне кажется уж точно не реально смастерить.
но это совсем черновой вариант, надо конечно допиливать. в принципе там должно быть понятен вектор направления. в a:after только надо будет еще фонтавесом какойнить вставить со стрелкой.

 

[Seraferer]

если на чистом css то разве плагин есть дял фотошопа Css hat он може тстили стянуть.

фотошоп 2015 может бес плагинов всё стянуть. Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся
чтото такое замутил, только левый изогнутый край как мне кажется уж точно не реально смастерить.
но это совсем черновой вариант, надо конечно допиливать. в принципе там должно быть понятен вектор направления. в a:after только надо будет еще фонтавесом какойнить вставить со стрелкой.

Большое спасибо! Будем допиливать

 

[EuRo1985]

А смысл тут CSS-а? через background гораздо проще, быстрее и в данном случае, мне кажется правильнее.

 

[perfectartyshock]

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

 

[semio]

Та вроде бы не сложно через div, div:hover div сделать.

В див картинку? Или вы о реализации кнопки с помощью кода?

О реализации. Мог бы сделать, но нужны исходники.

 

[DemSky]

Проще и быстрее использовать картинку.

В див картинку? Или вы о реализации кнопки с помощью кода?

 

[Seraferer]

А как насчет SVG? Я о нем, правда, только слышал - практики в нем никакой