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

Question

[Юрий Кучеренко]

Привет всем, как реализовать такие кнопки как на https://xapo.com/ интересует эффект на кнопке "Start Tour" подозреваю что возможно связано с SVG, подскажите что нужно для создания такой штуки. Может у кого уже были такие на проекте, подкиньте решение. Спасибо

Answer 1

[Дмитрий Маринин]

Нет, SVG тут не нужен. Там используется обычный элемент с белым фоном и нулевой высотой (height), который находится внутри ссылки с overflow: hidden. Он повернут на 45 градусов и имеет opacity: 0. При наведении, opacity становится равным 1, и его высота (height) увеличивается на значение, равное ширине (width) ссылки, внутри которой он лежит (засчет чего и создается эффект заполнения).

Answer 2

[Вова Будняк]

https://tympanus.net/Development/CreativeButtons/ вот что-то похожее