# Flecha con rebote (B 175)

Categoría: Botones  
Etiquetas: link-style, arrow, text, animated, bounce  
Página: https://designforai.dev/es/snippet/btn-175

## 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.

## HTML

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

## CSS

```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; }
}
```