Design for AI

Banner CTA con flecha

Banner CTA con flecha: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

ctabannerwidesubtitlearrowlight

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
}
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>
Prompt

Un botón banner CTA claro (hasta 460px de ancho): blanco con borde 1px #e2e8f0, radio 16px, padding 18px por 22px, un titular 17px bold y un subtítulo 13px #64748b a la izquierda y un círculo oscuro de 40px con una flecha derecha a la derecha. En hover el borde se oscurece, añade una sombra suave y desliza el círculo de la flecha 4px a la derecha volviéndolo azul #2563eb; active #f8fafc. Focus con outline oscuro de 2px.

Misma estantería