<!-- ???? Настраиваемая анимация для кнопки .animate-button -->
<style>
:root {
/* === ЦВЕТА === */
--button-bg-hover: #F8B133; /* Фон при наведении */
--button-text-hover: #ffffff; /* Цвет текста при наведении */
--button-border-color: #202020; /* Цвет рамки */
/* === ИКОНКИ === */
--icon-default: url(https://static.tildacdn.com/tild3835-6132-4630-b030-346134643765/Polygon_1.svg); /* Иконка по умолчанию */
--icon-hover: url(https://static.tildacdn.com/tild3336-3032-4137-b464-613061383830/Polygon_2.svg); /* Иконка при наведении */
/* === РАЗМЕРЫ ДЛЯ ДЕСКТОПА === */
--icon-size: 14px;
--icon-right: 32px;
--icon-scale-hover: 50;
--text-margin-right: 15px;
/* === РАЗМЕРЫ ДЛЯ МОБИЛЬНЫХ (до 640px) === */
--icon-size-mobile: 10px;
--icon-right-mobile: 20px;
--icon-scale-hover-mobile: 50;
}
.animate-button .tn-atom {
border: 2px solid var(--button-border-color) !important; /* Толщина обводки */
position: relative;
overflow: hidden;
}
.animate-button:hover .tn-atom {
background: var(--button-bg-hover) !important;
transition: background 2.3s ease-in-out !important;
transition-delay: 0.2s;
}
.animate-button .tn-atom:after,
.animate-button .tn-atom:before {
position: absolute;
width: var(--icon-size);
height: var(--icon-size);
right: var(--icon-right);
top: 50%;
transform: translateY(-50%);
background-size: contain;
background-repeat: no-repeat;
}
.animate-button .tn-atom:after {
content: '';
background-image: var(--icon-default);
transition: transform 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.animate-button:hover .tn-atom:after {
transform: scale(var(--icon-scale-hover));
}
.animate-button .tn-atom:before {
content: "";
background-image: var(--icon-hover);
opacity: 0;
z-index: 9;
transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.animate-button:hover .tn-atom:before {
opacity: 1;
}
.animate-button div {
display: inline-block;
position: relative;
z-index: 1;
margin-right: var(--text-margin-right);
transition: color 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.animate-button:hover div {
color: var(--button-text-hover);
}
@media (max-width: 640px) {
.animate-button .tn-atom:after,
.animate-button .tn-atom:before {
width: var(--icon-size-mobile);
height: var(--icon-size-mobile);
right: var(--icon-right-mobile);
}
.animate-button:hover .tn-atom:after {
transform: scale(var(--icon-scale-hover-mobile));
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.animate-button .tn-atom').forEach(btn => {
const wrapper = document.createElement('div');
wrapper.textContent = btn.textContent;
btn.innerHTML = '';
btn.appendChild(wrapper);
});
});
</script>