Menu Buttons Around Earth
body, html { margin: 0; padding: 0; height: 100%; } .earth { background-image: url('earth.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } .menu-button { width: 100px; height: 100px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; font-size: 16px; font-weight: bold; } #btn1 { top: 10%; left: 50%; } #btn2 { top: 50%; left: 80%; } #btn3 { top: 90%; left: 50%; } #btn4 { top: 50%; left: 20%; } #btn5 { top: 20%; left: 80%; } #btn6 { top: 80%; left: 20%; } #btn7 { top: 80%; left: 80%; }