# Par doble (B 090)

Categoría: Botones  
Etiquetas: split, dual, primary-secondary, pair  
Página: https://designforai.dev/es/snippet/btn-090

## Prompt

Un par de botones unidos dentro de un contenedor con borde de 1px #d1d5db y radio de 10px: el izquierdo "Cancel" es blanco con texto gris #374151, el derecho "Confirm" es oscuro #111827 con texto blanco, ambos de 14px semibold, padding de 12px por 20px, sin separación. Al pasar el cursor cada uno se aclara (#f3f4f6 / #1f2937); en active se atenúan un 10%. Outline de foco dibujado 3px por dentro del borde.

## HTML

```html
<div class="btn-090"><button class="s">Cancel</button><button class="p">Confirm</button></div>
```

## CSS

```css
.btn-090 {
  display: inline-flex;
  gap: 0;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden
}
.btn-090 button {
  font: 600 14px/1 system-ui,sans-serif;
  border: 0;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .15s
}
.btn-090 .s {
  color: #374151;
  background: #fff
}
.btn-090 .s:hover {
  background: #f3f4f6
}
.btn-090 .p {
  color: #fff;
  background: #111827
}
.btn-090 .p:hover {
  background: #1f2937
}
.btn-090 button:focus-visible {
  outline: 2px solid #111827;
  outline-offset: -3px
}
.btn-090 button:active {
  filter: brightness(.9)
}
```