Как создать такую вот кнопку как на изображении?

Question

[webpirat777]

Мне нужно чтобы ссылка была в виде кнопки , и она первоначально не имела правую часть
когда навожусь на ссылку, правая часть плавно выдвигается вправо (как на изображении) и svg иконка вращается , создавая такую вот форму как на изображении , которое я предоставил.

Comments

[Ivan Ustûžanin]

единственное, что приходит в голову, это использование svg-фильтров feGaussianBlur и (вроде) feColorMatrix, где-то на просторах интернета встречал демку где такой эффект описывается, но сейчас сходу не нашёл

[Ankhena]

Я бы попробовала разбить на 2 или 3 фигуры в зависимости от красоты анимации.
Делаем исходную кнопку.

Если выезжающую форму делать двумя элементами, то с учетом вращающейся иконки, двух псевдиков нам не хватит, придется пустой спан использовать. Если в одну детальку, то хватит.
При наведении выезжают эти детальки и крутится спан с иконкой.

Либо забыть про переполнение и делать подложку из svg, при наведении включать анимацию.

Ещё альтернатива: комбо этих вариантов: кнопка как была, при наведении запускаем анимацию svg, которой изначально не видно.

[Ankhena]

Вот пример реализации вашей кнопки https://sitist.ru/magic-border-radius.html#vyezzha...

Answer 1

[Vinyard Rip]

Вот здесь частичное решение, если я правильно задачу понял