Flecha con rebote

Flecha con rebote: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un enlace verde #065f46 15px semibold con una flecha hacia abajo en negrita después, gap 8px, padding 8px por 14px, radio 8px, sin fondo. En hover el fondo se tiñe de menta #ecfdf5 y la flecha rebota 4px hacia abajo y vuelve cada 0.8s; active #d1fae5. Focus con outline verde de 2px.

Flecha con rebote

Misma estantería