JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

<div class="knopka">
    <a href="">
        Проложить маршрут в Я.Карты <img height="24" src="https://cultofthepartyparrot.com/parrots/hd/partyparrot.gif" ></a>
</div>

CSS

.knopka {
  display: block;
  background-color: #50a467;
  border-radius: 100px;
  width: 360px;
  margin: 20px auto;
  text-align: center;
}

.knopka a {
  color: #ffffff;
  padding: 10px 20px;
  text-decoration: none;
  font-family: 'Raleway', Arial, sans-serif;
  font: 400 18px tahoma;
  vertical-align: middle;
  display: table-cell;
  width: 500px;
  text-align: center;
}

.knopka img {
  padding-left: 10px;
  margin-bottom: -2px;
}

.knopka:hover img {
  animation-name: slideRight;

  animation-duration: 0.5s;
  animation-iteration-count: 1;

  animation-timing-function: ease-in-out;
}

.knopka:hover a {
  animation-name: slideRight_text;

  animation-duration: 0.9s;

  transition: transform 500ms ease-out;
}

@keyframes slideRight_text {
  0% {
    transform: translateX(0%);
  }

  4% {
    transform: translateX(1%);
  }

  8% {
    transform: translateX(2%);
  }

  12% {
    transform: translateX(3%);
  }

  16% {
    transform: translateX(4%);
  }

  20% {
    transform: translateX(5%);
  }

  24% {
    transform: translateX(6%);
  }

  28% {
    transform: translateX(7%);
  }

  32% {
    transform: translateX(8%);
  }

  36% {
    transform: translateX(9%);
  }

  40% {
    transform: translateX(10%);
  }

  44% {
    transform: translateX(11%);
  }

  48% {
    transform: translateX(12%);
  }

  52% {
    transform: translateX(11%);
  }

  56% {
    transform: translateX(10%);
  }

  60% {
    transform: translateX(9%);
  }

  64% {
    transform: translateX(8%);
  }

  68% {
    transform: translateX(7%);
  }

  72% {
    transform: translateX(6%);
  }

  76% {
    transform: translateX(5%);
  }

  80% {
    transform: translateX(4%);
  }

  84% {
    transform: translateX(3%);
  }

  88% {
    transform: translateX(2%);
  }

  92% {
    transform: translateX(1%);
  }

  100% {
    transform: translateX(0%);
  }

}

@keyframes slideRight {
  0% {
    transform: translateX(0%);
  }

  4% {
    transform: translateX(10%);
  }

  8% {
    transform:...