Как сделать анимацию как на сайте https://moonee.io/ кнопка submit game. При ховере стрелка уходит в правую сторону, и с левой стороны выезжает стрелка другого цвета. Когда убираешь курсор с кнопки, стрелка уходит в левую сторону, и с правой стороны выезжает стрелка первоначального цвета.
-
Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.– Дух сообщества Бот19 сен в 17:34
-
Мне требуется реализовать анимацию, при ховере на кнопку. В кнопке есть стрелка. при наведении на кнопку, стрелка должна смещаться в правую сторону, уходя за видимость блока. Одновременно с этим, с левой стороны блока, появляется стрелка другого цвета.– nikitos123453019 сен в 17:39
Добавить комментарий
|
1 ответ
Там используется спрайт, то есть svg
файл с двумя видами стрелки черной и белой, где при наведении изображение меняет свою позицию:
.button {
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
border: 1px solid black;
background: none;
border-radius: 5px;
min-width: 200px;
cursor: pointer;
transition: all .2s ease-in-out;
}
.button img {
width: 26px;
max-width: 26px;
transition: all .2s ease-in-out;
}
.button:hover {
background: black;
color: white;
}
.button:hover img {
transform: translateX(50%);
}
<button class="button">
<span>Submit game</span>
<img src="https://global-uploads.webflow.com/62e2c358a0640ef4a64115dc/62f905defdef238ed9b57d12_arr-sprite-w-bl.svg">
</button>