0

Как сделать анимацию как на сайте https://moonee.io/ кнопка submit game. При ховере стрелка уходит в правую сторону, и с левой стороны выезжает стрелка другого цвета. Когда убираешь курсор с кнопки, стрелка уходит в левую сторону, и с правой стороны выезжает стрелка первоначального цвета.

2
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 19 сен в 17:34
  • Мне требуется реализовать анимацию, при ховере на кнопку. В кнопке есть стрелка. при наведении на кнопку, стрелка должна смещаться в правую сторону, уходя за видимость блока. Одновременно с этим, с левой стороны блока, появляется стрелка другого цвета. 19 сен в 17:39

1 ответ 1

0

Там используется спрайт, то есть 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.