<!--Кнопки со стрелкой
https://mt-webdesign.ru/btn-arrow-->
<!--Увеличение точки-->
<style>
/*Настройки кнопки*/
:root {
--DotColor: #FFF555; /*цвет круга*/
--TextColorHover: #000; /*цвет текста по наведению*/
--ImgDot: url(https://static.tildacdn.com/tild3531-6263-4462-a630-393530366431/Frame_6757786.png), url(https://static.tildacdn.com/tild3531-6263-4462-a630-393530366431/Frame_6757786.png); /*цвет текста по наведению*/
}
.dot-scale .tn-atom {
overflow: hidden !important;
position: relative;
transition: all 1.2s ease-in-out, color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
}
.dot-scale:hover .tn-atom {
transition-delay: 0.2s;
background: var(--DotColor) !important;
transition: background 2.3s ease-in-out !important;
}
.dot-scale .tn-atom:after {
content: '';
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
align-items: center;
right: 15px;
border-radius: 1000px;
background-color: var(--DotColor);
background-size: cover; 
top: 50%;
transform: translateY(-50%);
transition: transform 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
.dot-scale .tn-atom:before {
content: "";
display: inline-block;
height: 12px;
width: 12px;
background-image: var(--ImgDot);
background-position: 0 0px, -12px -12px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
right: 15px;
top: 50%;
transform: translateY(-50%);
position: absolute;
z-index: 9;
animation-name: buttonArrow;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
@keyframes buttonArrow {
0% {
background-position: 0 0px, -12px 12px;
}
100% {
background-position: 12px -12px, 0 0;
}
}
.dot-scale:hover .tn-atom:before {
opacity: 1;
}
.dot-scale:hover .tn-atom:after {
transform: scale(50);
}
.dot-scale .tn-atom {
overflow: hidden;
}
.dot-scale div {
display: inline-block;
z-index: 1;
position: relative;
transition: color 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
margin-right: 15px;
}
.dot-scale:hover div {
color: var(--TextColorHover);
}
</style>
<script>
$('.dot-scale-2').addClass('dot-scale');
</script>
<script>
    var btndots = document.querySelectorAll('.dot-scale .tn-atom');
    btndots.forEach(function(btndots) {
        var divDot = document.createElement('div');
        divDot.textContent = btndots.textContent;
        var fontSize = window.getComputedStyle(btndots).fontSize;
        divDot.style.fontSize = fontSize;
        btndots.innerHTML = '';
        btndots.appendChild(divDot);
    });
</script>

<style>
    .dot-scale-2:hover .tn-atom,
    .dot-scale-2 .tn-atom:after {
        background: #000 !important;
    }
    .dot-scale-2 .tn-atom:before {
        background-image: url(https://static.tildacdn.com/tild6330-6237-4131-b135-666438653661/Frame_6757786.png), url(https://static.tildacdn.com/tild6330-6237-4131-b135-666438653661/Frame_6757786.png) !important;
    }
    .dot-scale-2:hover div {
        color: #fff !important;
       
    }
</style>

<!--Перемещение стрелки-->
<style>
/*Настройки кнопки*/
:root {
    --ArrowBGLeft: #FFF555; /*цвет круга слева*/
    --ArrowBGRight: #FFF555; /*цвет круга справа*/
    --ArrowBGImgLeft: url('https://static.tildacdn.com/tild3165-6361-4637-a264-316231663463/arrow.svg'); /*изображение стрелки слева*/
    --ArrowBGImgRight: url('https://static.tildacdn.com/tild3165-6361-4637-a264-316231663463/arrow.svg'); /*изображение стрелки справа*/
}

    .arrow-slide .tn-atom:before {
        content: '';
        position: relative;
        display: inline-block;
        width: 40px;
        height: 40px;
        left: 0;
        align-items: center;
        top: 0;
        margin: 7px;
        border-radius: 50px;
        background-color: var(--ArrowBGLeft);
        background-image: var(--ArrowBGImgLeft);
        background-size: cover; 
        transition: all 0.5s;
    }
    .arrow-slide .tn-atom {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        transform-origin: center center;
        padding-right: 2px;
            height: 100%;
            min-height: 54px;
    }
  
    .arrow-slide .tn-atom:after {
        content: '';
        position: relative;
        display: inline-block;
        width: 0px;
        height: 0px;
        left: 0;
        align-items: center;
        top: 0;
        margin: 5px;
        border-radius: 100px;
        background-color:var(--ArrowBGRight);
        background-image: var(--ArrowBGImgRight);
        background-size: cover; 
        transition: 0.5s;
        transform: scale(0);
    }
    .arrow-slide:hover .tn-atom:before {
        transform: scale(0);
        width: 0;
        height: 0;
    }
    .arrow-slide:hover .tn-atom:after {
        transform: scale(1);
        width: 40px;
        height: 40px;
    }

</style>
<script>
    $('.arrow-slide-2').addClass('arrow-slide');
</script>

<style>
.arrow-slide-2 .tn-atom:before {
        background-color: #000;
        background-image: url('https://static.tildacdn.com/tild6332-3135-4139-a532-636435656265/arrow_1.svg');
}
.arrow-slide-2 .tn-atom:after {
        background-color: #000;
        background-image: url('https://static.tildacdn.com/tild6332-3135-4139-a532-636435656265/arrow_1.svg');
}
</style>

<!--Зумирование стрелки-->
<style>
/*Настройки кнопки*/
:root {
    --ZoomColor: #FFF555; /*цвет круга*/
    --TextColorZoomHover: #000; /*цвет текста по наведению*/
    --ImgZoom: url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png), url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png); /*изображение стрелки*/
    
}

    .arrow-zoom .tn-atom {
        overflow: hidden !important;
        position: relative;
        transition-delay: 0.7s !important;
        transition: all 2.1s ease-in-out, color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
    }
    .arrow-zoom .tn-atom:after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 40px;
        height: 40px;
        align-items: center;
        right: 5px;
        border-radius: 1000px;
        background-color: var(--ZoomColor);
        background-size: cover; 
            top: 50%;
    transform: translateY(-50%);
        transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    }
    
    
   

    
.arrow-zoom .tn-atom:before {
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
    background-image: var(--ImgZoom);
    background-position: -12px 0px, 0px 0px;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
   right: 18px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    position: absolute;
    z-index: 9;
    
    
}

@keyframes buttonArrow-2 {
    0% {
        
        background-position: -12px 0px, 0px 0px;
    }
    100% {
        background-position: 0px 0px, 12px 0;
    }
}

.arrow-zoom:hover .tn-atom:before {
    animation-name: buttonArrow-2;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99);
    opacity: 1;
}

    
    .arrow-zoom:hover .tn-atom:after {
    width: 100%;
        height: 100%;
        right:0;
    transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    }
    
    
    
    
    
    .arrow-zoom .tn-atom {
        overflow: hidden;
    }
    .arrow-zoom div {
    display: inline-block;
    z-index: 1;
    right: 10px;
    position: relative;
    transition: color 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
     margin-right: 15px;
    }
    .arrow-zoom:hover div {
        color: var(--TextColorZoomHover);
    }
    
    .arrow-zoom:hover .tn-atom {
        background: #fff555 !important;
        transition: background 2.3s ease-in-out !important;
    }
    
    
</style>

<script>
    $('.arrow-zoom-2').addClass('arrow-zoom');
</script>


<script>
    var btnzoom = document.querySelectorAll('.arrow-zoom .tn-atom');
    btnzoom.forEach(function(btnzoom) {
        var divZoom = document.createElement('div');
        divZoom.textContent = btnzoom.textContent;
        var fontSize = window.getComputedStyle(btnzoom).fontSize;
        divZoom.style.fontSize = fontSize;
        btnzoom.innerHTML = '';
        btnzoom.appendChild(divZoom);
    });
</script>

<style>
    .arrow-zoom-2:hover .tn-atom,
    .arrow-zoom-2 .tn-atom:after {
        background: #000 !important;
    }
    .arrow-zoom-2 .tn-atom:before {
        background-image:url(https://static.tildacdn.com/tild3134-3366-4031-b331-366339383830/Frame_6757785.png), url(https://static.tildacdn.com/tild3134-3366-4031-b331-366339383830/Frame_6757785.png) !important;
    }
    .arrow-zoom-2:hover div {
        color: #fff !important;
       
    }
</style>

<!--Появление стрелки-->
<style>
/*Настройки кнопки*/
:root {
    --BgColorArrow: #FFF555; /*цвет круга*/
    --ImgArrowBg: url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png), url(https://static.tildacdn.com/tild6434-6637-4362-b763-373735626631/Frame_6757785.png); /*изображеие стрелки*/
    
}

    .arrow-scale .tn-atom {
        overflow: hidden !important;
        position: relative;
        transition: all 1.2s ease-in-out, color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
    }
    .arrow-scale .tn-atom:after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 0px;
        height: 0px;
        align-items: center;
        right: 20px;
        border-radius: 1000px;
        background-color: var(--BgColorArrow);
        background-size: cover; 
            top: 50%;
    transform: translateY(-50%);
        transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    }
    
    
   

    
.arrow-scale .tn-atom:before {
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
    background-image:var(--ImgArrowBg);
    background-position: -12px 0px, 0px 0px;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
   right: 18px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    position: absolute;
    z-index: 9;
    
    
}

@keyframes buttonArrow-3 {
    0% {
        
        background-position: -12px 0px, 0px 0px;
    }
    100% {
        background-position: 0px 0px, 12px 0;
    }
}

.arrow-scale:hover .tn-atom:before {
    animation-name: buttonArrow-3;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99);
    opacity: 1;
}

    
    .arrow-scale:hover .tn-atom:after {
    width: 40px;
        height: 40px;
        right:5px;
    transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    }
    
    
    
    
    
    .arrow-scale .tn-atom {
        overflow: hidden;
    }
    .arrow-scale div {
    display: inline-block;
    z-index: 1;
    right: 0px;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    margin-right: 0 ;
    }
    .arrow-scale:hover div {
        transform: translateX(-20px);
    }
    
    .arrow-scale:hover .tn-atom {
        transition-delay: 0.5s;
        /*background: #fff555 !important;*/
        transition: background 1.2s ease-in-out !important;
    }
    
    
</style>

<script>
    $('.arrow-scale-2').addClass('arrow-scale');
</script>


<script>
    var btnarrow = document.querySelectorAll('.arrow-scale .tn-atom');
    btnarrow.forEach(function(btnarrow) {
        var divArrow = document.createElement('div');
        divArrow.textContent = btnarrow.textContent;
        var fontSize = window.getComputedStyle(btnarrow).fontSize;
        divArrow.style.fontSize = fontSize;
        btnarrow.innerHTML = '';
        btnarrow.appendChild(divArrow);
    });
</script>

<style>
    .arrow-scale-2 .tn-atom:after {
        background: #000 !important;
    }
    .arrow-scale-2 .tn-atom:before {
         background-image:url(https://static.tildacdn.com/tild3134-3366-4031-b331-366339383830/Frame_6757785.png), url(https://static.tildacdn.com/tild3134-3366-4031-b331-366339383830/Frame_6757785.png) !important;
    }

</style>