Floating Radial Action Wheel

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="wheel-nav-606"><button class="center">⚡</button><div class="ring"><span class="item i1">🎨</span><span class="item i2">⚙️</span><span class="item i3">🚀</span></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.wheel-nav-606 { position: relative; width: 40px; height: 40px; margin: auto; }
.wheel-nav-606 .center { position: relative; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: #2563eb; color: #fff; border: none; font-size: 16px; cursor: pointer; box-shadow: 0 6px 16px rgba(37,99,235,0.4); }
.wheel-nav-606 .ring { position: absolute; inset: -20px; z-index: 1; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.wheel-nav-606:hover .ring { opacity: 1; pointer-events: auto; }
.wheel-nav-606 .item { position: absolute; width: 24px; height: 24px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); cursor: pointer; }
.wheel-nav-606 .i1 { top: -10px; left: 8px; }
.wheel-nav-606 .i2 { top: 26px; left: -14px; }
.wheel-nav-606 .i3 { top: 26px; right: -14px; }