Кнопки управления CSS

Я создал это с помощью Tailwindcss, конвертировать в ванильный CSS не составит труда. Посмотрите - https://play.tailwindcss.com/AvNKHh64Nu. Я также включу код, если вы предпочитаете использовать игровую площадку попутного ветра.

<div 
  class = "flex h-screen w-screen items-center justify-center"
>
  <div 
    class = "relative size-56 overflow-hidden rounded-full bg-gray-300"
  >
    <button 
      class = "absolute -top-6 left-14 size-28 rotate-45 bg-red-500 transition hover:bg-red-600 active:bg-red-400" 
      title = "you are hovering red"
    ></button>
    <button 
      class = "absolute -right-6 top-14 size-28 rotate-45 bg-blue-500 transition hover:bg-blue-600 active:bg-blue-400" 
      title = "you are hovering blue"
    ></button>
    <button 
      class = "absolute -bottom-6 left-14 size-28 rotate-45 bg-yellow-500 transition hover:bg-yellow-600 active:bg-yellow-400" 
      title = "you are hovering yellow"
    ></button>
    <button 
      class = "absolute -left-6 top-14 size-28 rotate-45 bg-green-500 transition hover:bg-green-600 active:bg-green-400" 
      title = "you are hovering green"
    ></button>
  </div>
</div>

Предварительный просмотр конечного результата (очевидно, измените цвет, размер и т. д. в соответствии с вашим дизайном, это лишь общее представление о том, как выполнить ваш запрос).