RGB-Split Hover

RGB-Split Hover: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Eine schwarze #18181b Pille mit 2px weißem Rahmen, weißer Text 15px extra-bold mit 0.05em Tracking, 13px mal 30px Padding. Beim Hover spalten sich Text und Rahmen chromatisch: eine Cyan #22d3ee Kopie 2-3px links und eine rote #f43f5e Kopie 2-3px rechts (text-shadow und box-shadow), plus ein kurzes gestuftes horizontales Zittern. Active zieht den Split auf 1px zusammen. Fokus 2px Cyan-Outline mit 4px Offset.

RGB-Split Hover

Gleiches Regal