Design for AI

Geteilter Vorhang

Geteilter Vorhang: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

hover-fillsplittwo-panelsoutline

CSS
.btn-061 {
  position: relative;
  overflow: hidden;
  font: 600 14px/1 system-ui,sans-serif;
  color: #047857;
  background: transparent;
  border: 2px solid #047857;
  border-radius: 8px;
  padding: 12px 26px;
  cursor: pointer;
  z-index: 0;
  transition: color .3s
}
.btn-061::before,.btn-061::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #047857;
  transition: transform .3s;
  z-index: -1
}
.btn-061::before {
  left: 0;
  transform: translateX(-100%)
}
.btn-061::after {
  right: 0;
  transform: translateX(100%)
}
.btn-061:hover {
  color: #fff
}
.btn-061:hover::before,.btn-061:hover::after {
  transform: translateX(0)
}
.btn-061:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 3px
}
.btn-061:active::before,.btn-061:active::after {
  background: #065f46
}
HTML
<button class="btn-061">Open</button>
Prompt

Ein smaragdgrüner Outline-Button (2px Rahmen #047857, Smaragd-Text, 8px Radius, 12px mal 26px Padding). Beim Hover schieben sich zwei halbbreite Panels gleichzeitig von links und rechts herein und treffen sich in der Mitte (300ms), füllen ihn smaragdgrün und der Text wird weiß. Active #065f46. Fokus-Outline 2px Smaragd.

Gleiches Regal