Как сверстать такие кнопки с градиентом?

Question

[Nevs]

Передо мной встала задача сверстать вот такие кнопки: Не могу понять как сделать градиентом задний фон и границу, чтобы границы оставались закругленными. Заднего фона градиентного я добился, но border сделать градиентом не могу. (Мне необходимо, чтобы и border-radius сохранялся) Подскажите пожалуйста, как это сверстать?

Answer 1

[Вадим Кот]

https://codepen.io/anon/pen/GBrJvY

Answer 2

[Павел Беляев]

Может просто border-radius делать, он же работает и с нулевой границей и с border: none;

Или закруглять у родительского блока а во вложенном текст и градиентный фон?
Или делать градиентную заливку у родитея и padding 1px, а вложенный блок синенький с текстом.
Если хочешь, что-бы тут тебе помогли, то хотя-бы поделись тем, что у тебя есть и что не получается...
А так все мимо пробегут, таких вопросом очень много тут и понять сложно что хочет автор.

Comments

[Nevs]

Мне нужно больше второй вариант сделать, можете пожалуйста просто дать мне код второй кнопки: Подробнее, с градиентной рамкой?? Очень прошу, а оттуда отталкиваясь я всё сам сделаю

[JhaoDa]

«чтобы», «хотя бы».

Answer 3

[Иван В]

habrahabr.ru/post/140760/
css-tricks.com/examples/GradientBorder/

Comments

[Nevs]

Мне нужно больше второй вариант сделать, можете пожалуйста просто дать мне код второй кнопки: Подробнее?? Очень прошу, а оттуда отталкиваясь я всё сам сделаю

Answer 4

[Ольга Ветер]

Проблема в градиентном бордере, верно?

Можно попробовать похимичить с border-image.

Если кнопка лежит на сплошном фоне - можно добавить ей элементa after или before нужного цвета, синего в вашем случае, и с позиционировать как надо, оставив торчать кусок градиента толщиной в нужный бордер.

Можно использовать svg

Answer 5

[5tka]

Есть несколько вариантов решения.
Вот ссылка https://www.hongkiat.com/blog/css-gradient-border/
1) через border-image играться
2) через первоэлементы after/before

Answer 6

[Ankhena]

Через псевдоэлементы: https://jsfiddle.net/q8pnt7bg/
border-image со скругленными углами не будет работать.

Альтернатива - svg

Comments

[Ankhena]

Вы уверены, что вторая кнопка с градиентом? Я - нет, но решение выше :)

Answer 7

[Варлам Ерофеич]

- А давайте потренируемся вместе? (глядишь и научимся)))
Пример, как работать с border-image:
- Ну вот, стиль для кнопки <div class="boxic"><b>- Тыц -</b></div> почти готов.
Кнопка имеет стили .boxic:hover{}, .boxic:active{} и cursor: pointer;