<!--https://dsgnmax.ru/icon-favourite-->
<style>
/*Своя иконка избранного в карточках товаров*/
:root{
--iconNormal: url(https://static.tildacdn.com/tild6331-3866-4262-b166-376366343630/normal.svg);
--iconAdded: url(https://static.tildacdn.com/tild3935-3465-4131-b638-656630306137/added.svg);
--iconScaleHover: scale(1.1); /*Увеличение иконки при наведении*/
--iconTransition: all .4s ease-in-out; /*Плавность анимации*/
--bgIconRadiusNormal: 10px; /*Радиус скругления углов у подложки с иконкой*/
--bgIconRadiusHover: 20px; /*Радиус скругления углов у подложки с иконкой при наведении*/
--bgIconColorNomral: rgba(255, 255, 255, 0.2); /*Цвет подложки с иконкой для эффекта стекла*/
--bgIconColorHover: #fff; /*Цвет подложки с иконкой при наведении*/
--widthIcon: 32px; /*Ширина иконки*/
--heightIcon: 32px; /*Высота иконки*/
}
/*Иконка в обычном состоянии*/
a.t1002__addBtn:after {
content: "";
position: absolute;
width: var(--widthIcon);
height: var(--heightIcon);
background-image: var(--iconNormal);
background-repeat: no-repeat;
transition: var(--iconTransition);
}
/*Иконка при наведении*/
a.t1002__addBtn:hover:after {
content: "";
transform: var(--iconScaleHover);
transition: var(--iconTransition);
}
/*Иконка, когда товар добавили в избранное*/
a.t1002__addBtn_active:after {
content: "";
width: var(--widthIcon);
height: var(--heightIcon);
background-image: var(--iconAdded);
background-repeat: no-repeat;
}
/*Скрываем оригинальную иконку*/
.t1002__addBtn svg{
display:none;
}
/*Если нужен определенный радиус скругления и цвет у подложки с иконкой*/
.t1002__addBtn{
border-radius: var(--bgIconRadiusNormal) !important; /*Радиус скругления*/
background: var(--bgIconColorNomral) !important; /*Цвет подложки*/
transition: var(--iconTransition);
backdrop-filter: blur(10px); /*Размытие элементов под подложкой с иконкой*/
}
.t1002__addBtn:hover{
border-radius: var(--bgIconRadiusHover) !important; /*Радиус скругления при наведении*/
background: var(--bgIconColorHover) !important; /*Цвет подложки при наведении*/
transition: var(--iconTransition);
}
.t1002__addBtn_active{
background: var(--bgIconColorHover) !important;
}
</style>