Вес шрифта кнопки меняется при наведении курсора с переходом ⇐ CSS

[Anonymous]

При наведении курсора на кнопку насыщенность шрифта всех остальных кнопок на некоторое время мерцает.
Настройка размера и жирности шрифта, удаление псевдоселектора :active и использование :after тоже это не исправляет. Вот ссылка на код: https://codepen.io/EdenTheCoder/pen/gOyJjBB

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

body {
text-align: center;
background-color: #131313;
font-family: Arial;
color: white;
}

.buttons {
margin: 5px 5px;
padding: 10px 100px;
position: relative;
border: 2px solid rgb(255, 0, 242);
border-radius: 10px;
background: #ffffff00;
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);
}

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

button
button
button

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