<div class="main">
    <div class="menu">
        <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZp%0D%0AZXdCb3g9IjAgMCAxOCAxMiIgd2lkdGg9IjE4cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8y%0D%0AMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0%0D%0AY2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUv%0D%0APjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFn%0D%0AZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9%0D%0AIkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04Ny4wMDAwMDAsIC0zNDIuMDAwMDAwKSI+PGcg%0D%0AaWQ9Im1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3LjAwMDAwMCwgMzQyLjAwMDAwMCkiPjxw%0D%0AYXRoIGQ9Ik0wLDEyIEwxOCwxMiBMMTgsMTAgTDAsMTAgTDAsMTIgTDAsMTIgWiBNMCw3IEwxOCw3%0D%0AIEwxOCw1IEwwLDUgTDAsNyBMMCw3IFogTTAsMCBMMCwyIEwxOCwyIEwxOCwwIEwwLDAgTDAsMCBa%0D%0AIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4=" class="menu__base">
        <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGQ9Ik00OTcuOTEzLDQ5Ny45MTNjLTE4Ljc4MiwxOC43ODItNDkuMjI1LDE4Ljc4Mi02OC4w%0D%0AMDgsMGwtODQuODYyLTg0Ljg2M2MtMzQuODg5LDIyLjM4Mi03Ni4xMywzNS43MTctMTIwLjY1OSwz%0D%0ANS43MTcgIEMxMDAuNDY5LDQ0OC43NjcsMCwzNDguMzEyLDAsMjI0LjM4M1MxMDAuNDY5LDAsMjI0%0D%0ALjM4NCwwYzEyMy45MzEsMCwyMjQuMzg0LDEwMC40NTIsMjI0LjM4NCwyMjQuMzgzICBjMCw0NC41%0D%0AMTQtMTMuMzUyLDg1Ljc3MS0zNS43MTgsMTIwLjY3Nmw4NC44NjMsODQuODYzQzUxNi42OTUsNDQ4%0D%0ALjcwNCw1MTYuNjk1LDQ3OS4xMzEsNDk3LjkxMyw0OTcuOTEzeiBNMjI0LjM4NCw2NC4xMDkgIGMt%0D%0AODguNTExLDAtMTYwLjI3NCw3MS43NDctMTYwLjI3NCwxNjAuMjczYzAsODguNTI2LDcxLjc2NCwx%0D%0ANjAuMjc0LDE2MC4yNzQsMTYwLjI3NGM4OC41MjUsMCwxNjAuMjczLTcxLjc0OCwxNjAuMjczLTE2%0D%0AMC4yNzQgIEMzODQuNjU3LDEzNS44NTYsMzEyLjkwOSw2NC4xMDksMjI0LjM4NCw2NC4xMDl6Ii8+%0D%0APC9zdmc+" class="menu__base">

        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIw%0D%0AMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0i%0D%0Abm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0i%0D%0ALTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBvbHln%0D%0Ab24gc3Ryb2tlPSIjZmZmZmZmIiBpZD0ic3ZnXzEiIHBvaW50cz0iODAuMiw1MS42IDUxLjQsNTEu%0D%0ANiA1MS40LDIyLjYgNDguOSwyMi42IDQ4LjksNTEuNiAxOS45LDUxLjYgMTkuOSw1NC4xIDQ4Ljks%0D%0ANTQuMSA0OC45LDgzLjEgICA1MS40LDgzLjEgNTEuNCw1NC4xIDgwLjQsNTQuMSA4MC40LDUxLjYg%0D%0AIiBmaWxsPSIjZmZmZmZmIi8+CiA8L2c+Cjwvc3ZnPg==" class="menu__trigger" id="btn">
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIw%0D%0AMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0i%0D%0Abm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0i%0D%0ALTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHJlY3Qg%0D%0AaWQ9InN2Z18xIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgZmlsbC1ydWxlPSJldmVub2RkIiBm%0D%0AaWxsPSJub25lIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KICA8cGF0aCBpZD0iWW91dHViZSIgZmls%0D%0AbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNWM1YzVjIiBkPSJtMTI2LjcyLDM4LjIyNGMwLDAgLTEu%0D%0AMjUyLC04Ljg4MyAtNS4wODgsLTEyLjc5NGMtNC44NjgsLTUuMTM2IC0xMC4zMjQsLTUuMTYgLTEy%0D%0ALjgyNCwtNS40NThjLTE3LjkxMiwtMS4zMDUgLTQ0Ljc4LC0xLjMwNSAtNDQuNzgsLTEuMzA1bC0w%0D%0ALjA1NiwwYzAsMCAtMjYuODY4LDAgLTQ0Ljc4LDEuMzA1Yy0yLjUwNCwwLjI5OCAtNy45NTYsMC4z%0D%0AMjIgLTEyLjgyOCw1LjQ1OGMtMy44MzYsMy45MTIgLTUuMDg0LDEyLjc5NCAtNS4wODQsMTIuNzk0%0D%0Acy0xLjI4LDEwLjQzNCAtMS4yOCwyMC44NjNsMCw5Ljc4MWMwLDEwLjQzMyAxLjI4LDIwLjg2MyAx%0D%0ALjI4LDIwLjg2M3MxLjI0OCw4Ljg4MyA1LjA4NCwxMi43OTRjNC44NzIsNS4xMzYgMTEuMjY4LDQu%0D%0AOTc1IDE0LjExNiw1LjUxMWMxMC4yNCwwLjk5MSA0My41MiwxLjI5NyA0My41MiwxLjI5N3MyNi44%0D%0AOTYsLTAuMDQgNDQuODA4LC0xLjM0NWMyLjUsLTAuMzAyIDcuOTU2LC0wLjMyNiAxMi44MjQsLTUu%0D%0ANDYyYzMuODM2LC0zLjkxMiA1LjA4OCwtMTIuNzk0IDUuMDg4LC0xMi43OTRzMS4yOCwtMTAuNDMg%0D%0AMS4yOCwtMjAuODY0bDAsLTkuNzgxYzAsLTEwLjQyOSAtMS4yOCwtMjAuODYzIC0xLjI4LC0yMC44%0D%0ANjN6bS03NS45MzYsNDIuNDk2bC0wLjAwNCwtMzYuMjE5bDM0LjU4NCwxOC4xNzJsLTM0LjU4LDE4%0D%0ALjA0N3oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgogPC9nPgo8L3N2Zz4=" class="menu__item menu__item--0">
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYuNjkzIiBoZWlnaHQ9IjU2LjY5MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMu%0D%0Ab3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3Qg%0D%0AZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4%0D%0AMiIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAg%0D%0APHBhdGggZmlsbD0iIzVjNWM1YyIgaWQ9InN2Z18xIiBkPSJtNTIuODM3LDE1LjA2NWMtMS44MTEs%0D%0AMC44MDUgLTMuNzYsMS4zNDggLTUuODA1LDEuNTkxYzIuMDg4LC0xLjI1IDMuNjg5LC0zLjIzIDQu%0D%0ANDQ0LC01LjU5MmMtMS45NTMsMS4xNTkgLTQuMTE1LDIgLTYuNDE4LDIuNDU0Yy0xLjg0MywtMS45%0D%0ANjQgLTQuNDcsLTMuMTkyIC03LjM3NywtMy4xOTJjLTUuNTgxLDAgLTEwLjEwNiw0LjUyNSAtMTAu%0D%0AMTA2LDEwLjEwN2MwLDAuNzkxIDAuMDg5LDEuNTYyIDAuMjYyLDIuMzAzYy04LjQsLTAuNDIyIC0x%0D%0ANS44NDgsLTQuNDQ1IC0yMC44MzMsLTEwLjU2Yy0wLjg3LDEuNDkyIC0xLjM2OCwzLjIyOCAtMS4z%0D%0ANjgsNS4wODJjMCwzLjUwNiAxLjc4NCw2LjYgNC40OTYsOC40MTJjLTEuNjU2LC0wLjA1MyAtMy4y%0D%0AMTUsLTAuNTA4IC00LjU3OCwtMS4yNjVjLTAuMDAxLDAuMDQyIC0wLjAwMSwwLjA4NSAtMC4wMDEs%0D%0AMC4xMjhjMCw0Ljg5NiAzLjQ4NCw4Ljk4IDguMTA4LDkuOTFjLTAuODQ4LDAuMjMgLTEuNzQxLDAu%0D%0AMzU0IC0yLjY2MywwLjM1NGMtMC42NTIsMCAtMS4yODUsLTAuMDYzIC0xLjkwMiwtMC4xODJjMS4y%0D%0AODcsNC4wMTUgNS4wMTksNi45MzggOS40NDEsNy4wMTljLTMuNDU5LDIuNzExIC03LjgxNiw0LjMy%0D%0ANyAtMTIuNTUyLDQuMzI3Yy0wLjgxNSwwIC0xLjYyLC0wLjA0OCAtMi40MTEsLTAuMTQyYzQuNDc0%0D%0ALDIuODY5IDkuNzg2LDQuNTQxIDE1LjQ5Myw0LjU0MWMxOC41OTEsMCAyOC43NTYsLTE1LjQgMjgu%0D%0ANzU2LC0yOC43NTZjMCwtMC40MzggLTAuMDA5LC0wLjg3NSAtMC4wMjgsLTEuMzA5YzEuOTc0LC0x%0D%0ALjQyMiAzLjY4OCwtMy4yMDMgNS4wNDIsLTUuMjN6Ii8+CiA8L2c+Cjwvc3ZnPg==" class="menu__item menu__item--1">
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYuNjkzIiBoZWlnaHQ9IjU2LjY5MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMu%0D%0Ab3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3Qg%0D%0AZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4%0D%0AMiIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAg%0D%0APHBhdGggZmlsbD0iIzVjNWM1YyIgaWQ9InN2Z18xIiBkPSJtNDAuNDMsMjEuNzM5bC03LjY0NSww%0D%0AbDAsLTUuMDE0YzAsLTEuODgzIDEuMjQ4LC0yLjMyMiAyLjEyNywtMi4zMjJjMC44NzcsMCA1LjM5%0D%0ANSwwIDUuMzk1LDBsMCwtOC4yNzhsLTcuNDMsLTAuMDI5Yy04LjI0OCwwIC0xMC4xMjUsNi4xNzQg%0D%0ALTEwLjEyNSwxMC4xMjVsMCw1LjUxOGwtNC43NywwbDAsOC41M2w0Ljc3LDBjMCwxMC45NDcgMCwy%0D%0ANC4xMzcgMCwyNC4xMzdsMTAuMDMzLDBjMCwwIDAsLTEzLjMyIDAsLTI0LjEzN2w2Ljc3LDBsMC44%0D%0ANzUsLTguNTN6Ii8+CiA8L2c+Cjwvc3ZnPg==" class="menu__item menu__item--2">


    </div>
</div>

:root{
    --blue: #008EFA;
    --pink: #FF207A;
    --bg: #EEEEEE;
    --white: #FEFEFE;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--bg);
	
	
}
.main{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 300px;
    height: 200px;
    position: relative;
}
.menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    height: 100px;
    padding: 30px;

    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
    background-color: var(--white);
}
.menu__trigger{
    position: absolute;
    top: 50px;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    background-color: var(--blue);
    border: 10px solid var(--bg);
    border-radius: 50%;
    padding: 20px;
    cursor: pointer;
    transition: .35s ease;
}
.menu__base{
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: .7;
}
.menu__item{
    position: absolute;
    width: 60px;
    height: 60px;
    top: 70px;
    padding: 20px;
    border-radius: 50%;


    background-color: var(--white);
    border: none;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
    z-index: -1000;
    opacity: 0;
}
.menu__item--0{ transition: .35s ease; left: calc(50% - 30px);}
.menu__item--1{ transition: .35s ease .1s; left: calc(50% - 30px);}
.menu__item--2{ transition: .35s ease .2s; right: calc(50% - 30px);}

.is-rotate {
    transform: rotateZ(225deg);
    background-color: var(--pink);
}
.item-0 { top: 20px; left: calc(50% - 110px); opacity: 1;}
.item-1 { top: -25px; left: calc(50% - 30px); opacity: 1;}
.item-2 { top: 20px; right: calc(50% - 110px); opacity: 1;}

/*
Designed by: Nicholas.design
Original image: https://dribbble.com/shots/7160097-Add-Interaction
*/

const btn = document.querySelector("#btn");
const item = document.querySelectorAll(".menu__item");

let showCard = (event) => {
    btn.classList.toggle("is-rotate");
    for (var i = 0; i < item.length; i++) {
        item[i].classList.toggle(`item-${i}`);
    }
}

btn.addEventListener("click", showCard);