Seta que quica

Seta que quica: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um link verde #065f46 15px semibold com uma seta para baixo em negrito depois dele, gap de 8px, padding 8px por 14px, raio de 8px, sem fundo. No hover o fundo ganha um tom de menta #ecfdf5 e a seta quica 4px para baixo e volta a cada 0.8s; active #d1fae5. Focus com outline verde de 2px.

Seta que quica

Mesma prateleira