Button with rolling text on hover 1

HTML

html

<a class="roll-btn" href="#">
  <span class="roll-btn__viewport" aria-hidden="true">
    <span class="roll-btn__stack">
      <span class="roll-btn__text">STOPIMO V STIK</span>
      <span class="roll-btn__text">STOPIMO V STIK</span>
      <span class="roll-btn__text">STOPIMO V STIK</span>
    </span>
  </span>
  <span class="roll-btn__sr">STOPIMO V STIK</span>
</a>

CSS

css

/* ===== Rolling Button (infinite on hover + slows to stop on mouse off) ===== */

.roll-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #ff7a00 !important;
  color: #F2EFEB !important;

  padding: 3vh 3vw;
  border-radius: 6px;
  text-decoration: none;

  font-weight: 800;
  font-size: 1.8vh;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  line-height: 1;

  transition: background-color 200ms ease, color 200ms ease, filter 200ms ease;
}

.roll-btn__viewport{
  display: block;
  height: 1em;          /* exactly one line tall */
  overflow: hidden;
}

.roll-btn__text{
  display: block;
  height: 1em;          /* each line is exactly one line */
}

/* Infinite rolling animation:
   - Use 3 copies of the text in HTML
   - Moves up 2 lines then loops seamlessly */
@keyframes rollLoop {
  from { transform: translateY(0); }
  to   { transform: translateY(-2em); }
}

/* Default (not hovered): sit at rest.
   When hover ends, the animation is removed and this transition makes it "coast" back to rest */
.roll-btn__stack{
  display: block;
  will-change: transform;
  transform: translateY(0);
  transition: transform 900ms cubic-bezier(.16,1,.3,1); /* "slow down to a stop" feel */
}

/* Hover / focus: roll infinitely */
.roll-btn:hover .roll-btn__stack,
.roll-btn:focus-visible .roll-btn__stack{
  animation: rollLoop 0.5s linear infinite; /* change duration to adjust speed */
}

/* Optional: slightly nicer feel */
.roll-btn:hover,
.roll-btn:focus-visible{
  background: #ff7a00 !important;
  color: #F2EFEB !important;
  filter: brightness(0.98);
}

/* Screen-reader text (accessibility) */
.roll-btn__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .roll-btn__stack{
    animation: none !important;
    transition: none !important;
  }
}