Design for AI

Separação RGB

Separação RGB: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

cyberpunkglitchpillchromatictext-shadow

CSS
.btn-145 {
  font: 800 15px/1 system-ui,sans-serif;
  letter-spacing: .05em;
  color: #fff;
  background: #18181b;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
  transition: text-shadow .15s,box-shadow .15s,transform .15s
}
.btn-145:hover {
  text-shadow: -2px 0 #22d3ee,2px 0 #f43f5e;
  box-shadow: -3px 0 0 #22d3ee,3px 0 0 #f43f5e;
  animation: jit145 .3s steps(3) 2
}
.btn-145:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 4px
}
.btn-145:active {
  transform: translateX(1px);
  text-shadow: none;
  box-shadow: -1px 0 0 #22d3ee,1px 0 0 #f43f5e
}
@keyframes jit145 {
  33% {
    transform: translateX(-2px)
  }
  66% {
    transform: translateX(2px)
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-145, .btn-145 * { animation: none; transition: none; }
}
HTML
<button class="btn-145">Jack in</button>
Prompt

Uma pílula preta #18181b com borda branca de 2px, texto branco de 15px extra-bold com tracking de 0.05em, padding de 13px por 30px. No hover o texto e a borda se separam cromaticamente: uma cópia ciano #22d3ee 2-3px à esquerda e uma cópia vermelha #f43f5e 2-3px à direita (text-shadow e box-shadow), mais um breve tremor horizontal em steps. No active a separação cai para 1px. Foco com outline ciano de 2px e offset de 4px.

Mesma prateleira