.circle{
position: relative;
overflow: hidden;
color: var(--main-color);
}
.circle::before {
position: absolute;
content: ' \25CF';
font-size: 51px;
top: -10px;
right: 37px;
transition: .7s;
}
.circle.active{
overflow: visible;
}
.circle.active::before {
top: 0;
}
там кнопки не двигаются вправо до 1140px, а у меня они смещаются после каждого пикселя. Я не спорю, что я плохой верстальщик и не понимаю очевидный вещей, да и в примере другая ситуация, но я поэтому и задал вопрос, чтоб мне подсказали.