.swipe {
    background-color: #faf9f7; /* Цвет заднего фона кнопки */
    color: #c07858; /* Цвет текста кнопки */
    border: 0px solid #c07858; /* Цвет обводки кнопки */
    padding: 0px 0px; /* Отступы для кнопки (можно изменить) */
    border-radius: 70px; /* Скругление углов кнопки */
    position: relative;
    transition: 700ms ease all; /* Плавный переход */
    outline: none; /* Убираем обводку */
    overflow: hidden; /* Скрываем содержимое, выходящее за границы */
    z-index: 1; /* Устанавливаем порядок наложения */
}

.swipe:hover {
    background-color: #faf9f7; /* Цвет фона кнопки при наведении */
    color: #e3dcd8; /* Цвет текста кнопки при наведении */
    border-color: #faf9f7; /* Цвет обводки кнопки при наведении */
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); /* Тень для Safari */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); /* Тень для остальных браузеров */
}

.swipe:hover:before {
    transform: translateX(0);
    opacity: 1;
}

.swipe:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #c07858; /* Цвет фона псевдоэлемента (можно изменить) */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: 0.5s ease-in-out;
    z-index: -1; /* Помещаем псевдоэлемент за кнопку */
    opacity: 0; /* Скрываем псевдоэлемент по умолчанию */
    border-radius: 25px; /* Скругление углов псевдоэлемента */
}


}
ul {
    list-style-image: url("https://optim.tildacdn.com/tild6263-6436-4563-a633-383137656234/-/format/webp/Ellipse_2.png.webp")
}