# Fila compartir dividida (B 188)

Categoría: Botones  
Etiquetas: share, group, rounded, icon-buttons, generic  
Página: https://designforai.dev/es/snippet/btn-188

## Prompt

Una fila de botones de compartir: un único contenedor redondeado con radio 10px y borde 1px #d1d5db que contiene un segmento de texto "Share" y dos segmentos de icono (eslabón, sobre) separados por divisores 1px #e5e7eb, 40px de alto, blanco. Cada segmento pasa a #f3f4f6 en hover y a oscuro #111827 con contenido blanco en active. El focus es un outline inset de 2px en el segmento. Sin logos de marcas.

## HTML

```html
<div class="btn-188"><button>Share</button><button aria-label="Copy link"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg></button><button aria-label="Email"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18v12H3zM3 6l9 7 9-7"/></svg></button></div>
```

## CSS

```css
.btn-188 {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  background: #fff
}
.btn-188 button {
  display: grid;
  place-items: center;
  font: 600 14px/1 system-ui,sans-serif;
  color: #111827;
  background: transparent;
  border: 0;
  border-left: 1px solid #e5e7eb;
  padding: 0 14px;
  height: 40px;
  cursor: pointer;
  transition: background .15s,color .15s
}
.btn-188 button:first-child {
  border-left: 0;
  padding: 0 18px
}
.btn-188 button:hover {
  background: #f3f4f6
}
.btn-188 button:focus-visible {
  outline: 2px solid #111827;
  outline-offset: -3px
}
.btn-188 button:active {
  background: #111827;
  color: #fff
}
```