FAB mini stack
FAB mini stack: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A vertical stack of two 44px mini FABs, 10px apart: white circles with a soft neutral shadow and teal #0f766e inline icons (chat bubble, phone). On hover each fills teal with a white icon, scales 1.08 and gains a teal shadow; active scales 0.95 on #115e59. Focus 2px teal outline offset 3px.