# Geteilter Vorhang (B 061)

Kategorie: Buttons  
Tags: hover-fill, split, two-panels, outline  
Seite: https://designforai.dev/de/snippet/btn-061

## 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.

## HTML

```html
<button class="btn-061">Open</button>
```

## CSS

```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
}
```