Как сделать такие же кнопки как на сайте GeekBrains?

Question

[Олег Колобов]

Я недавно наткнулся на сайт geekbrains.com и мне очень понравился стиль их кнопок во вкладке с курсами. Как сделать почти такие же кнопки?

Comments

[Lynatik001]

градиент понравился:?)

[zorca]

https://uigradients.com/

[Олег Колобов]

Lynatik001, Не, просто кнопки очень понравились

[Олег Колобов]

zorca, Ну.... Не то что я бы хотел, но всё равно, спасибо!

[hzzzzl]

Олег Колобов, можно же открыть и посмотреть/потырить

[Виолетта Морозова]

Это как бы не кнопки, а блоки с ссылками

Answer 1

[The Wizard of Oz]

Можно сделать например вот так:



Градиенты можно найти и создать например на этом сайте или поискать множество других с более расширенным функционалом, если нет желания пилить вручную градиенты. Уголки для контейнера иконки можно закруглить если воспользоваться другим методом ClipPath, т.е SVG + Clip-Path или просто SVG как на сайте указанном в вашем примере. Всё остальное думаю должно быть и так понятно.

Comments

[Виолетта Морозова]

А можно эти уголки сверстать бордер-радиусом, потому что такие "флажки" верстаются на раз чистым css-ом, и не нужно заморачиваться с clip-path.

[The Wizard of Oz]

Виолетта Морозова, да, но не каждый элемент можно адекватно и красиво, а главное надёжно сверстать одним только CSS. Иногда это какие-то жуткие костыли, или хаки, назвать которые нормальным решением сложно. Это конечно лично моё мнение, но нужно использовать инструменты по назначению и если CSS решает одни задачи, то SVG / Clip-Path решает другие.

[Виолетта Морозова]

The Wizard of Oz, возможно вы правы.