Design for AI

Pegatina con contorno

Pegatina con contorno: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

stickerbadgepillrotationoutline-stroke

CSS
.btn-160 {
  font: 900 16px/1 system-ui,sans-serif;
  letter-spacing: .02em;
  color: #1e3a8a;
  background: #bfdbfe;
  border: 3px solid #1e3a8a;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 0 0 4px #fff,0 0 0 6px #1e3a8a,4px 6px 0 6px #1e3a8a;
  transform: rotate(4deg);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),background .2s
}
.btn-160:hover {
  transform: rotate(-4deg) scale(1.06);
  background: #93c5fd
}
.btn-160:focus-visible {
  outline: 2px solid #1e3a8a;
  outline-offset: 10px
}
.btn-160:active {
  transform: rotate(0) translate(2px,3px);
  box-shadow: 0 0 0 4px #fff,0 0 0 6px #1e3a8a,1px 2px 0 6px #1e3a8a
}
HTML
<button class="btn-160">Wow</button>
Prompt

Una píldora tipo pegatina de dibujos animados: relleno azul claro #bfdbfe, borde azul marino #1e3a8a de 3px, después un hueco blanco de 4px y un trazo exterior azul marino de 2px (anillos con box-shadow) con una sombra dura desplazada en azul marino (4px 6px), texto azul marino 16px en peso black, padding 12px por 24px, inclinado +4 grados. En hover salta a -4 grados con escala 1.06 sobre #93c5fd; en active se endereza y se hunde sobre la sombra. Focus con outline azul marino de 2px y offset 10px para librar los anillos.

Misma estantería