Design for AI

Download que cai

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

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

Um botão de download azul claro: preenchimento #eff6ff, borda de 1px #bfdbfe, texto azul #1d4ed8 de 14px semibold com um ícone de download em SVG inline de 16px (seta entrando na bandeja) à esquerda, raio de 8px, padding de 11px por 18px. No hover o preenchimento vai para #dbeafe e o ícone desce 3px; active #bfdbfe. Outline de foco de 2px azul.

Mesma prateleira