Free Component
Speed Dial Floating Action Button
A circular Floating Action Button (FAB) that expands radial quick-action triggers on click with smooth spring transitions and tooltips.
Colours in this gradient
#0f172a#3b82f6#ec4899#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="fab-stage">
<div class="fab-container" id="fabContainer">
<div class="fab-actions">
<div class="fab-mini fab-m3" data-tip="Duplicate Template">
<span class="fm-icon">📋</span>
<span class="fm-tip">Duplicate</span>
</div>
<div class="fab-mini fab-m2" data-tip="Share Link">
<span class="fm-icon">🔗</span>
<span class="fm-tip">Share Link</span>
</div>
<div class="fab-mini fab-m1" data-tip="Bookmark">
<span class="fm-icon">⭐</span>
<span class="fm-tip">Bookmark</span>
</div>
</div>
<button class="fab-main" id="fabMainBtn" aria-label="Quick Actions">
<span class="fab-cross">+</span>
</button>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create a Speed Dial Floating Action Button (FAB) in HTML, CSS and vanilla JavaScript. Requirements: - Fixed circular trigger button that rotates 45 degrees into an 'X' close button on open. - Staggered spring expansion of 3 secondary action buttons stacked above. - Tooltips appearing to the left of secondary action buttons on hover. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Structure main trigger with rotating cross glyph (+ to x).
- 2
Stack secondary mini action buttons with opacity: 0 and scale(0).
- 3
Stagger expansion transitions using CSS transition-delay.
Customisation tips
- Setting pointer-events: none when closed prevents accidental clicks on hidden child buttons.