*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
background:linear-gradient(45deg,#28007c,#d0286d);
font-family:sans-serif;
}

.menu{
position:relative;
width:60px;
height:60px;
}

.checkbox{
position:absolute;
opacity:0;
}

/* buttons */

.label_checkbox,
.menu_link{
position:absolute;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:.35s;
background:white;
box-shadow:0 0 8px rgba(0,0,0,.35);
}

.label_checkbox{
z-index:10;
cursor:pointer;
}

/* icons inside buttons */

.menu_icon{
width:60%;
height:60%;
object-fit:contain;
}

/* plus & close icons */

.icon_plus,
.icon_close{
width:26px;
height:26px;
position:absolute;
transition:.25s;
}

.icon_close{
opacity:0;
}

/* when open */

.checkbox:checked ~ .label_checkbox .icon_plus{
opacity:0;
}

.checkbox:checked ~ .label_checkbox .icon_close{
opacity:1;
}

/* radial positions */

.checkbox:checked ~ .twitter{
transform:translate(70px,-70px);
}

.checkbox:checked ~ .bluesky{
transform:translateY(-95px);
}

.checkbox:checked ~ .pixiv{
transform:translate(-70px,-70px);
}

.checkbox:checked ~ .kofi{
transform:translate(70px,70px);
}

.checkbox:checked ~ .instagram{
transform:translateY(95px);
}

.checkbox:checked ~ .substar{
transform:translate(-70px,70px);
}