# Banner CTA con icono (B 194)

Categoría: Botones  
Etiquetas: cta, banner, wide, subtitle, icon, soft  
Página: https://designforai.dev/es/snippet/btn-194

## Prompt

Un banner CTA crema suave (hasta 400px): #fff7ed con borde 1px #fed7aa, radio 14px, padding 14px por 18px, una baldosa de icono redondeada de 44px con tinte naranja a la izquierda que contiene una estrella inline, luego un titular #7c2d12 15px bold sobre un subtítulo #9a3412 de 13px. En hover los tintes se intensifican y la baldosa del icono se menea (-8 grados, escala 1.08); active #fed7aa. Focus con outline naranja de 2px.

## HTML

```html
<button class="btn-194"><i aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 15.6 7.1 18.2l.9-5.5-4-3.9L9.5 8z"/></svg></i><span><b>Rate this tool</b><small>Takes ten seconds, helps a lot</small></span></button>
```

## CSS

```css
.btn-194 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 400px;
  text-align: left;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .2s,border-color .2s
}
.btn-194 i {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  color: #ea580c;
  background: #ffedd5;
  border-radius: 12px;
  transition: transform .25s,background .2s
}
.btn-194 span {
  display: flex;
  flex-direction: column;
  gap: 3px
}
.btn-194 b {
  font: 700 15px/1.1 system-ui,sans-serif
}
.btn-194 small {
  font: 400 13px/1.3 system-ui,sans-serif;
  color: #9a3412
}
.btn-194:hover {
  background: #ffedd5;
  border-color: #fdba74
}
.btn-194:hover i {
  transform: rotate(-8deg) scale(1.08);
  background: #fed7aa
}
.btn-194:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 3px
}
.btn-194:active {
  background: #fed7aa
}
```