Возможно ли сверстать такую кнопку на html+css?

Question

[Xtray]

Кнопка залита градиентом, рамка полупрозрачная. При наведении и клике градиент меняется.
Возможно ли сверстать точно такую кнопку используя html+css?

У меня получилось только с помощью svg, но, к сожалению, это решение оказалось не лишено багов, например, было не кроссбраузерным.

Answer 1

[GreatRash]

Нет. Кроссбраузерно, только SVG. Предлагаю подход graceful degradation: то есть для современных браузеров SVG, а для старых - картинка.

Comments

[Xtray]

Спасибо. Я подозревал это, не не был уверен...

Answer 2

[iBird Rose]

• рамку сделать через box-shadow
  
• Градиент через www.colorzilla.com/gradient-editor
  
• треугольник справа через :after (по старинке готовой картинкой, либо сделать треугольник на ксс через border)
  

Comments

[Алексей Сол]

Увы, через border не получится, мне кажется, потому что на представленной картинке выступающий угол треугольника немного скруглён.

Так что, считаю, что оптимален (не учитывая SVG) ваш вариант box-shadow + background-gradient + ::after-картинка.

[Xtray]

iBird Rose, с градиентом вопросов нет, проблема в форме - треугольный конец не только скруглен, но является частью как бы ромба, а не квадрата (который можно было бы просто повернуть на 45 градусов)...

[Антон]

Если отказываться от svg, то предложили самый лучший вариант, с использованием треугольника в виде изображения, это при условии, если необходимо добиться идентичности с макетом. Т.к. при ховере меняется градиент, вам нужно сделать спрайт для этого треугольника и не забыть про @2x спрайт для ретинок. Только такой момент, что при ховере изображение стрелки будет меняться без анимации, если же нужна будет анимация смены градиента, то вариант с картинкой уже не подойдет.

Answer 3

[dijavu]

codepen.io/anon/pen/BzVgzQ

Comments

[Xtray]

Идея хорошая, спасибо. Я не догадался сделать два тега внутри . Но, к сожалению, требовалась pixel-perfect верстка...