Banner CTA con icono
Banner CTA con icono: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
}
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>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.