Design for AI

Adesivo com contorno

Adesivo com contorno: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Uma pílula estilo adesivo de desenho animado: preenchimento azul claro #bfdbfe, borda azul-marinho #1e3a8a de 3px, depois um espaço branco de 4px e um traço externo azul-marinho de 2px (anéis via box-shadow), com uma sombra dura azul-marinho deslocada (4px 6px), texto azul-marinho 16px em peso black, padding 12px por 24px, inclinado +4 graus. No hover salta para -4 graus em escala 1.06 sobre #93c5fd; no active endireita e pressiona sobre a sombra. Focus com outline azul-marinho de 2px e offset de 10px para passar dos anéis.

Mesma prateleira