Мои кнопки мерцают при наведении, я использую :hover ⇐ CSS

[Anonymous]

Код: Выделить всё

.buttons{

margin: 5px 5px;
padding: 10px 100px;
position: relative;

border: 2px solid rgb(255, 0, 242);
border-radius: 10px;
background: #ffffff00;
https://codepen.io/EdenTheCoder/pen/gOyJjBB     color: rgb(255, 0, 242);
font-size: 16px;
cursor: pointer;
font-weight: normal;
}
.buttons:hover{
transform: scale(0.95);
transition: 200ms;
color: rgb(255, 134, 249);
border-color: rgb(75, 40, 202);
}
.buttons:active{
transform: scale(0.9);
transition: 100ms;
color: rgb(255, 78, 175);
border-color: rgb(75, 40, 202);
}

когда я навожу курсор на кнопку, все в порядке, но вес шрифта всех остальных кнопок мерцает в течение небольшого промежутка времени. Я также пытался удалить :active, все равно не помогло, мерцание происходит после перехода я попробовал использовать: после того, как ничего не произошло, вот ссылка на codepen для замены https://codepen.io/EdenTheCoder/pen/gOyJjBB
я попробовал установить размер и жирность шрифта, но это не помогло исправь это

Подробнее здесь: https://stackoverflow.com/questions/784 ... sing-hover