# Descarga que cae (B 078)

Categoría: Botones  
Etiquetas: icon, download, inline-svg, bounce  
Página: https://designforai.dev/es/snippet/btn-078

## Prompt

Un botón de descarga azul pálido: relleno #eff6ff, borde de 1px #bfdbfe, texto azul #1d4ed8 de 14px semibold con un icono de descarga SVG inline de 16px (flecha hacia una bandeja) a la izquierda, radio de 8px, padding de 11px por 18px. Al pasar el cursor el relleno pasa a #dbeafe y el icono baja 3px; active #bfdbfe. Outline de foco de 2px azul.

## HTML

```html
<button class="btn-078"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M7 10l5 5 5-5M4 19h16"/></svg>Download PDF</button>
```

## CSS

```css
.btn-078 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .15s,border-color .15s
}
.btn-078 svg {
  transition: transform .2s
}
.btn-078:hover {
  background: #dbeafe;
  border-color: #93c5fd
}
.btn-078:hover svg {
  transform: translateY(3px)
}
.btn-078:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px
}
.btn-078:active {
  background: #bfdbfe
}
```