<style>
body {display: flex;justify-content: center;align-items: center; height: 100vh; overflow: hidden;background-color: #000;}<br />
.button-menu{cursor:pointer;position:absolute;z-index:1;background-color:#2c98e8;border:2px solid #1e1e1e;color:#1e1e1e;font-size:30px;font-weight:700;width:60px;height:60px;border-radius:50%;display:flex;justify-content:center;align-items:center;text-align:center;-webkit-box-shadow:0px3px10px0pxrgba(16,16,16,0.5);-moz-box-shadow:0px3px10px0pxrgba(16,16,16,0.5);box-shadow:0px3px10px0pxrgba(16,16,16,0.5);}.checkbox{width:60px;height:60px;opacity:0;z-index:10;cursor:pointer;}.option{position:absolute;background-color:#1e1e1e;border:2px solid #2c98e8;color:#2c98e8;z-index:-1;width:55px;height:55px;border-radius:50%;cursor:pointer;font-weight:700;transition:all 0.3s;-webkit-box-shadow:3px3px10px0pxrgba(16,16,16,0.5);-moz-box-shadow:3px3px10px0pxrgba(16,16,16,0.5);box-shadow:3px3px10px0pxrgba(16,16,16,0.5);}.checkbox:hover ~ .button-menu,.checkbox:checked ~ .button-menu{background-color:#2c98e8;scale:0.98;box-shadow:none;}.checkbox:not(:checked) ~ .button-menu::before{content:"+";}.checkbox:checked ~ .button-menu::after{content:"-";scale:0.98;box-shadow:none;}.checkbox:not(:checked) ~ .option{box-shadow:none;}.option:hover,.option:active,.option:focus{box-shadow:none;scale:0.98;}.checkbox:checked ~ .option-a{transition-delay:0.1s;transform:translateY(-70px);}.checkbox:checked ~ .option-b{transition-delay:0.2s;transform:translateY(-140px);}.checkbox:checked ~ .option-c{transition-delay:0.3s;transform:translateY(-210px);}<br />
</style>
<input class="checkbox" type="checkbox" />
<button class="option-a option">A</button>
<button class="option-b option">B</button>
<button class="option-c option">C</button>
<script></script>
