← All elements
<div class="sf"><input type="checkbox" id="sf"><label for="sf" class="main" aria-label="Actions"></label><a class="a1">A</a><a class="a2">B</a><a class="a3">C</a></div>About this button
A round plus button that spins into a cross and fans out three smaller action buttons, toggled by a checkbox.
How it works
A hidden checkbox drives everything. The main button's two bars form a plus and rotate 135 degrees into a cross when checked. The three smaller buttons start scaled down and invisible, then translate outward to different positions with a small stagger.
Ways to customise it
- Add more actions with extra translate values.
- Change the angles by editing the three translate pairs.
- Recolour with #0284c7.
Good to know
Give each action a real link or button and a label in your own project. The checkbox method opens on click and keeps working without scripts, but it will not close when clicking elsewhere.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.