# CTA-Banner Pfeil rechts (B 192)

Kategorie: Buttons  
Tags: cta, banner, wide, subtitle, arrow, light  
Seite: https://designforai.dev/de/snippet/btn-192

## Prompt

Ein heller CTA-Banner-Button (bis 460px breit): weiß mit 1px #e2e8f0 Rahmen, 16px Radius, 18px mal 22px Padding, links eine 17px fette Headline und ein 13px #64748b Untertitel, rechts ein 40px dunkler Kreis mit Pfeil nach rechts. Hover dunkelt den Rahmen, fügt einen weichen Schatten hinzu und schiebt den Pfeilkreis 4px nach rechts, wobei er blau #2563eb wird; Active #f8fafc. Focus: 2px dunkle Outline.

## HTML

```html
<button class="btn-192"><span><b>Book a demo</b><small>30 minutes with an engineer</small></span><i aria-hidden="true">&rarr;</i></button>
```

## CSS

```css
.btn-192 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 460px;
  text-align: left;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 22px;
  cursor: pointer;
  transition: border-color .2s,box-shadow .2s
}
.btn-192 span {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.btn-192 b {
  font: 700 17px/1.1 system-ui,sans-serif
}
.btn-192 small {
  font: 400 13px/1.3 system-ui,sans-serif;
  color: #64748b
}
.btn-192 i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font: 700 18px/1 system-ui,sans-serif;
  font-style: normal;
  color: #fff;
  background: #0f172a;
  border-radius: 50%;
  transition: transform .25s,background .2s
}
.btn-192:hover {
  border-color: #0f172a;
  box-shadow: 0 8px 24px -10px #0f172a55
}
.btn-192:hover i {
  transform: translateX(4px);
  background: #2563eb
}
.btn-192:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 3px
}
.btn-192:active {
  background: #f8fafc
}
```