Download-Drop

Download-Drop: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein blassblauer Download-Button: #eff6ff Füllung, 1px Rahmen #bfdbfe, blauer #1d4ed8 Text 14px semibold mit einem 16px Inline-SVG Download-Icon (Pfeil in Ablage) links, 8px Radius, 11px mal 18px Padding. Beim Hover geht die Füllung auf #dbeafe und das Icon sackt 3px ab; active #bfdbfe. Fokus-Outline 2px Blau.

Download-Drop

Gleiches Regal