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

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

У меня получилось только с помощью svg, но, к сожалению, это решение оказалось не лишено багов, например, было не кроссбраузерным.
  • Вопрос задан
  • 1099 просмотров
Решения вопроса 1
@GreatRash
Нет. Кроссбраузерно, только SVG. Предлагаю подход graceful degradation: то есть для современных браузеров SVG, а для старых - картинка.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
  • рамку сделать через box-shadow
  • Градиент через www.colorzilla.com/gradient-editor
  • треугольник справа через :after (по старинке готовой картинкой, либо сделать треугольник на ксс через border)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы