Мне нужно чтобы ссылка была в виде кнопки , и она первоначально не имела правую часть
когда навожусь на ссылку, правая часть плавно выдвигается вправо (как на изображении) и svg иконка вращается , создавая такую вот форму как на изображении , которое я предоставил.
единственное, что приходит в голову, это использование svg-фильтров feGaussianBlur и (вроде) feColorMatrix, где-то на просторах интернета встречал демку где такой эффект описывается, но сейчас сходу не нашёл
Я бы попробовала разбить на 2 или 3 фигуры в зависимости от красоты анимации.
Делаем исходную кнопку.
Если выезжающую форму делать двумя элементами, то с учетом вращающейся иконки, двух псевдиков нам не хватит, придется пустой спан использовать. Если в одну детальку, то хватит.
При наведении выезжают эти детальки и крутится спан с иконкой.
Либо забыть про переполнение и делать подложку из svg, при наведении включать анимацию.
Ещё альтернатива: комбо этих вариантов: кнопка как была, при наведении запускаем анимацию svg, которой изначально не видно.
