Animated arrow on CTA

A subtle nudge animation on the arrow, speeds up on hover. Adds momentum without screaming.

Animations Built JS-free

Use when — primary CTA on a hero. One per page is enough. Pairing with a static-arrow secondary CTA gives clear hierarchy.

Live demo

The code

.btn-arrow { display: inline-block; animation: arrow-nudge 1.4s ease-in-out infinite; }
.btn:hover .btn-arrow { animation-duration: 0.9s; }   /* speeds up on hover */

@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow { animation: none; }
}

Code playbook: vault/Topics/web-patterns.md § Pattern 19 (Animated arrow on CTA button).