Design for AI

Separación RGB en hover

Separación RGB en hover: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Una píldora negra #18181b con borde blanco de 2px, texto blanco de 15px extra bold con 0.05em de tracking, padding de 13px por 30px. Al pasar el cursor el texto y el borde se separan cromáticamente: una copia cian #22d3ee 2-3px a la izquierda y una copia roja #f43f5e 2-3px a la derecha (text-shadow y box-shadow), más un breve temblor horizontal en pasos. En active la separación se reduce a 1px. Foco con outline cian de 2px y offset de 4px.

Misma estantería