# Sunset gradient (B 024)

Category: Buttons  
Tags: gradient, solid, rounded, warm  
Page: https://designforai.dev/snippet/btn-024

## Prompt

A gradient button running 135deg from orange #f97316 to pink #ec4899, white 15px semibold text, 10px radius, 13px by 26px padding, with a pink glow shadow 0 4px 14px at 30%. Hover brightens 8%, lifts 1px and deepens the glow; active dims to 92%. Focus ring translucent 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
}
```