# Sonnenuntergang Verlauf (B 024)

Kategorie: Buttons  
Tags: gradient, solid, rounded, warm  
Seite: https://designforai.dev/de/snippet/btn-024

## Prompt

Ein Verlaufs-Button, 135deg von Orange #f97316 nach Pink #ec4899, weißer Text 15px semibold, 10px Radius, 13px mal 26px Padding, mit einem pinken Leuchtschatten 0 4px 14px bei 30%. Hover hellt 8% auf, hebt 1px und vertieft das Leuchten; active dimmt auf 92%. Fokusring halbtransparentes Pink.

## HTML

```html
<button class="btn-024">Get access</button>
```

## CSS

```css
.btn-024 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: linear-gradient(135deg,#f97316,#ec4899);
  border: 0;
  border-radius: 10px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(236,72,153,.3);
  transition: filter .15s,transform .15s,box-shadow .15s
}
.btn-024:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(236,72,153,.35)
}
.btn-024:focus-visible {
  outline: 3px solid rgba(236,72,153,.5);
  outline-offset: 2px
}
.btn-024:active {
  filter: brightness(.92);
  transform: none
}
```