# Cortina partida (B 061)

Categoría: Botones  
Etiquetas: hover-fill, split, two-panels, outline  
Página: https://designforai.dev/es/snippet/btn-061

## Prompt

Un botón de contorno esmeralda (borde de 2px #047857, texto esmeralda, radio de 8px, padding de 12px por 26px). Al pasar el cursor dos paneles de medio ancho entran a la vez desde los bordes izquierdo y derecho y se encuentran en el centro (300ms), rellenándolo de esmeralda mientras el texto se vuelve blanco. Active #065f46. Outline de foco de 2px esmeralda.

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