# Split curtain (B 061)

Category: Buttons  
Tags: hover-fill, split, two-panels, outline  
Page: https://designforai.dev/snippet/btn-061

## Prompt

An emerald outline button (2px #047857 border, emerald text, 8px radius, 12px by 26px padding). On hover two half-width panels slide in from the left and right edges simultaneously and meet in the middle (300ms), filling it emerald while the text turns white. Active #065f46. Focus outline 2px emerald.

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