Как реализовать нестандартную ссылку?

Question

[olya095]

без картинок

Comments

[Антон Литвиненко]

но при этом судя по картинке они еще и должны анимироваться

Answer 1

[andand44]

Можно с помощью символа юникода и псевдоэлементов сделать ➤
https://jsfiddle.net/5b240rLy/
Для третьей стрелки можно еще span добавить.

Comments

[olya095]

andand44, но так ведь только 2 стрелки, а не 3

[andand44]

Для третьей стрелки можно span добавить и использовать его псевдоэлементы по аналогии с двумя стрелками. Стрелки двигать с помощью absolute.
https://jsfiddle.net/n2q5ho97/

<a class="test">
  <span class="test-text">Подробнее</span>
</a>

[Виталий Першин]

andand44, olya095,

Что у вас с логикой, ставьте стрелок сколько хотите:

[andand44]

Виталий Першин, Там напрашивается анимация этих стрелок, как написали выше в комментарии к вопросу. Поэтому такое решение.

[olya095]

andand44, так вроде анимировать можнро https://jsfiddle.net/j9wrnfxc/

[Виталий Першин]

andand44, Там напрашивается отдельный элемент с функцией иконки, который можно будет вертеть как угодно, а не миксовать псевдоэлементы со спенами. Хотя технически можно наложить before и after друг на друга и анимировать при помощи clip-path или градиента

[olya095]

Виталий Першин, andand44, а такое тоже с помощью юникода? вроде не нахожу. Именно чтобы с скруглением

[Виталий Першин]

olya095, Если иконка нормально сделана, можно залить в fontello и получить иконочный шрифт

[andand44]

olya095, Имелась ввиду более изящная анимация. Например
Именно такой стрелки нет в юникоде. Похожих есть куча, но у них у всех есть острые углы.

[olya095]

Виталий Першин, на чистом css придется извращаться?

[Виталий Першин]

olya095, Я же вам дал ссылку. Вы можете залить туда икноку в svg и получить иконочный шрифт вместе с кодом иконки, который точно так же будете вставлять