Pilha de mini FABs

Pilha de mini FABs: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

fabcircleiconsmallgroup

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
}
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>
Prompt

Uma pilha vertical de dois mini FABs de 44px, com 10px de distância: círculos brancos com sombra neutra suave e ícones inline teal #0f766e (balão de chat, telefone). No hover cada um preenche teal com ícone branco, escala 1.08 e ganha uma sombra teal; no active escala 0.95 sobre #115e59. Focus com outline teal de 2px e offset de 3px.