Исправлено удвоение кнопки при перемещении при наведении. ⇐ CSS

[Anonymous]

Я делаю сайт на Vue js и хочу добавить кнопку бота-помощника справа внизу. Но поскольку это кнопка, я хочу, чтобы она как-то реагировала, поэтому при наведении я написал это:

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

.bot:hover {
transition: transform 0.15s ease-in-out;
transform: scale(2) translatey(-4.5vh);
}

И это работало бы отлично, если бы только оно не удваивалось каждый раз, когда мышь была на этой кнопке. Есть еще код и экран проблемы:

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

.bot {
position: fixed;
right: 2vw;
bottom: 0;
z-index: 100;
}

.bot:hover {
transition: transform 0.15s ease-in-out;
transform: scale(2) translatey(-4.5vh);
}

.bot:not(:hover){
transition: transform 0.2s ease-in-out;
}

.v-img{
width: 20vh;
}

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

Как видите, за большим роботом стоит маленький
Я пытался удалить div, переместить класс бота из div на кнопку, изменить положение от фиксированного ко всем остальным, что делает его невидимым. В каких-то случаях ничего не менялось, в каких-то не исправлялось в левом нижнем углу.

Подробнее здесь: https://stackoverflow.com/questions/787 ... d-on-hover