Arrow bounce

Arrow bounce: a CSS button. Copy the rules, or the prompt that rebuilds it.

link-stylearrowtextanimatedbounce

CSS

.btn-175 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 15px/1 system-ui,sans-serif;
  color: #065f46;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background .2s,color .2s
}
.btn-175 span {
  display: inline-block;
  font-weight: 800
}
.btn-175:hover {
  background: #ecfdf5;
  color: #047857
}
.btn-175:hover span {
  animation: bounce175 .8s ease-in-out infinite
}
.btn-175:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px
}
.btn-175:active {
  background: #d1fae5
}
@keyframes bounce175 {
  50% {
    transform: translateY(4px)
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-175, .btn-175 * { animation: none; transition: none; }
}

HTML

<a class="btn-175" href="#">Download<span aria-hidden="true">&darr;</span></a>

Prompt

A green #065f46 15px semibold link with a bold down arrow after it, 8px gap, 8px by 14px padding, 8px radius, no background. On hover the background tints mint #ecfdf5 and the arrow bounces 4px down and back every 0.8s; active #d1fae5. Focus 2px green outline.

Arrow bounce

Same shelf