styles.css

* 
{

margin: 0;
padding: 0;
box-sizing: border-box;

}

body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg,#00008B,#00BAFF);
}

.menu
{
   position: relative;
   width: 200px;
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.menu li
{ 
   position: absolute;
   left: 0;
   list-style: none;
   transform-origin: 100px;
   transition: 0.5s;
   transition-delay: calc(0.1s * var(--i));
   transform: rotate(0deg) translateX(80px);
}

.menu.active li 
{
   transform: rotate(calc(360deg / 8 * var(--i)));
}

.menu li a
{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   background: #fff;
   border-radius: 50%;
   transform: rotate(calc(360deg / 8 * var(--i)));
   box-shadow: 0 3px 4px rgba(0,0,0,0,15);
   color:#111;
   transition: 0.5s;
}

.menu li a:hover
{
   color:#0000FF;
}

.toggle
{
   position: absolute;
   width: 60px;
   height: 60px;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10000;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 0px 4px rgba(0,0,0,0,15);
   font-size: 2em;
   transition: transform 1.25s;
}

.menu.active .toggle
{
transform: rotate(315deg);
}