# Banner CTA com seta (B 192)

Categoria: Botões  
Tags: cta, banner, wide, subtitle, arrow, light  
Página: https://designforai.dev/pt/snippet/btn-192

## Prompt

Um botão de banner CTA claro (até 460px de largura): branco com borda de 1px #e2e8f0, raio de 16px, padding 18px por 22px, um título 17px bold e um subtítulo 13px #64748b à esquerda e um círculo escuro de 40px com seta para a direita à direita. No hover a borda escurece, surge uma sombra suave e o círculo da seta desliza 4px para a direita ficando azul #2563eb; active #f8fafc. Focus com outline escuro de 2px.

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