Как сделать иконку с круглым бордером + градиент и с прозрачным фоном внутри?

Question

[MortSith]

чтобы в моем примере при наведении вокруг буквы S фон был не белый, а прозрачный, и бордер с градиентом
(ну и если будет решение плюс к этому чтобы бордер вращался / ps. необязательно )

Answer 1

[xdevelx]

чтобы в моем примере при наведении вокруг буквы S фон был не белый, а прозрачный, и бордер с градиентом
(ну и если будет решение плюс к этому чтобы бордер вращался / ps. необязательно )

Тогда делайте круг с градиентом в svg и размещайте его в html или на фон псевдоэлемента. Ну и применяйте анимацию к свг или псевдоэлементу -

0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);

Если есть возможность экспортируйте svg из макета. Ели нет, то придется нарисовать.

Вот пример svg - там 2 варианта с инлайн свг и псевдоэлемент с фоном
https://codepen.io/xdevelx/pen/RwKVWgQ

Comments

[xdevelx]

Fructus, Можно одной строкой в css background-image - смотри codepen там 2 варианта на выбор
-webkit-mask поддержка браузеров не любое ТЗ устроит.

[xdevelx]

Fructus, Если надо поменять цвет - открыть html (1 вариант) или css (2 вариант) и исправить цвета. Там все цвета прописаны.