<!--Увеличение точки-->
<style>
    /*Настройки кнопки*/
    :root {
        --DotColor: #F5D5D2;
        /*цвет круга*/
        --TextColorHover: #D93433;
        /*цвет текста по наведению*/
        --ImgDot: url(https://static.tildacdn.com/tild6163-3064-4564-b862-643738343166/Frame_2.png), url(https://static.tildacdn.com/tild6163-3064-4564-b862-643738343166/Frame_2.png);
        /*цвет текста по наведению*/
    }

    .dot-scale {
        cursor: pointer;
    }

    .dot-scale .tn-atom {
        overflow: hidden !important;
        position: relative;
        transition: 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>
    document.addEventListener("DOMContentLoaded", function() {
        var btndots = document.querySelectorAll('.dot-scale .tn-atom');
        btndots.forEach(function(btndots) {
            var divDot = document.createElement('div');
            divDot.textContent = btndots.textContent;
            btndots.innerHTML = '';
            btndots.appendChild(divDot);
            if (window.innerWidth > 768) {
                var fontSize = window.getComputedStyle(btndots).fontSize;
                divDot.style.fontSize = fontSize;
            }
        });
    });
</script>