Pfeil hüpfend

Pfeil hüpfend: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein grüner #065f46 15px semibold Link mit fettem Pfeil nach unten dahinter, 8px Abstand, 8px mal 14px Padding, 8px Radius, kein Hintergrund. Beim Hover tönt sich der Hintergrund mint #ecfdf5 und der Pfeil hüpft alle 0.8s 4px nach unten und zurück; Active #d1fae5. Focus: 2px grüne Outline.

Pfeil hüpfend

Gleiches Regal