<div class="speed-dial">
<ul class="menu-items">
<li>
<button data-tooltip="Print">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
</button>
</li>
<li>
<button data-tooltip="Share">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" fill="none" stroke-width="2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
</button>
</li>
</ul>
<button class="main-btn">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" fill="none" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
</div>
* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
background: #f4f4f5;
height: 100vh;
}
.speed-dial {
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 15px;
z-index: 50;
}
.main-btn {
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: #3b82f6;
color: white;
cursor: pointer;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s;
}
.main-btn:hover {
transform: rotate(45deg);
}
.menu-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.menu-items li {
opacity: 0;
transform: translateY(20px) scale(0.8);
transition: 0.3s;
pointer-events: none;
}
.menu-items button {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: white;
color: #555;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.menu-items button:hover { background: #f9fafb; color: #3b82f6; }
/* Reveal on hover (or click for mobile via :focus-within if needed) */
.speed-dial:hover .menu-items li {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.speed-dial:hover .menu-items li:nth-child(1) { transition-delay: 0.1s; }
.speed-dial:hover .menu-items li:nth-child(2) { transition-delay: 0.05s; }
