# CTA banner arrow end (B 192)

Category: Buttons  
Tags: cta, banner, wide, subtitle, arrow, light  
Page: https://designforai.dev/snippet/btn-192

## Prompt

A light CTA banner button (up to 460px wide): white with 1px #e2e8f0 border, 16px radius, 18px by 22px padding, a 17px bold headline and 13px #64748b subtitle on the left and a 40px dark circle with a right arrow on the right. Hover darkens the border, adds a soft shadow and slides the arrow circle 4px right turning it blue #2563eb; active #f8fafc. Focus 2px dark 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
}
```