# CTA banner icon left (B 194)

Category: Buttons  
Tags: cta, banner, wide, subtitle, icon, soft  
Page: https://designforai.dev/snippet/btn-194

## Prompt

A soft cream CTA banner (up to 400px): #fff7ed with 1px #fed7aa border, 14px radius, 14px by 18px padding, a 44px rounded orange-tinted icon tile on the left holding an inline star, then a 15px bold #7c2d12 headline over a 13px #9a3412 subtitle. Hover deepens the tints and wiggles the icon tile (-8 degrees, 1.08 scale); active #fed7aa. Focus 2px orange outline.

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