Design for AI

Descarga que cae

Descarga que cae: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

icondownloadinline-svgbounce

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

Misma estantería