# Download drop (B 078)

Category: Buttons  
Tags: icon, download, inline-svg, bounce  
Page: https://designforai.dev/snippet/btn-078

## Prompt

A pale blue download button: #eff6ff fill, 1px #bfdbfe border, blue #1d4ed8 14px semibold text with a 16px inline SVG download icon (arrow into tray) on the left, 8px radius, 11px by 18px padding. On hover the fill goes #dbeafe and the icon drops 3px; active #bfdbfe. Focus outline 2px blue.

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