# Pila de mini FAB (B 170)

Categoría: Botones  
Etiquetas: fab, circle, icon, small, group  
Página: https://designforai.dev/es/snippet/btn-170

## Prompt

Una pila vertical de dos mini FAB de 44px, separados 10px: círculos blancos con sombra neutra suave e iconos inline teal #0f766e (bocadillo de chat, teléfono). En hover cada uno se rellena de teal con icono blanco, escala 1.08 y gana una sombra teal; active escala 0.95 sobre #115e59. Focus con outline teal de 2px y offset 3px.

## HTML

```html
<div class="btn-170"><button aria-label="Chat"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-11.6 7.2L4 21l1.8-5A8 8 0 1 1 21 12z"/></svg></button><button aria-label="Call"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg></button></div>
```

## CSS

```css
.btn-170 {
  display: inline-flex;
  flex-direction: column;
  gap: 10px
}
.btn-170 button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #0f766e;
  background: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px -2px #0003;
  transition: background .15s,color .15s,transform .15s,box-shadow .15s
}
.btn-170 button:hover {
  background: #0f766e;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 18px -4px #0f766e88
}
.btn-170 button:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 3px
}
.btn-170 button:active {
  transform: scale(.95);
  background: #115e59
}
```