RGB split hover

RGB split hover: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A black #18181b pill with a 2px white border, white 15px extra-bold text with 0.05em tracking, 13px by 30px padding. On hover the text and border split chromatically: a cyan #22d3ee copy 2-3px left and a red #f43f5e copy 2-3px right (text-shadow and box-shadow), plus a brief stepped horizontal jitter. Active collapses the split to 1px. Focus 2px cyan outline offset 4px.

RGB split hover

Same shelf