Untitled

<div class="controller">
  <div class="button button-triangle">▲</div>
  <div class="button button-square">■</div>
  <div class="button button-circle">●</div>
  <div class="button button-cross">X</div>
  <div class="dpad">
    <div class="dpad-up">↑</div>
    <div class="dpad-left">←</div>
    <div class="dpad-right">→</div>
    <div class="dpad-down">↓</div>
  </div>
  <div class="stick left-stick">L3</div>
  <div class="stick right-stick">R3</div>
  <div class="trigger trigger-l1">L1</div>
  <div class="trigger trigger-l2">L2</div>
  <div class="trigger trigger-r1">R1</div>
  <div class="trigger trigger-r2">R2</div>
</div>

body {
  font-family: Arial, sans-serif;
  background-color: #121212;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.controller {
  display: grid;
  grid-template-areas:
    "l2 l1    r1 r2"
    "left   .    .  right"
    "stick-left  .  .  stick-right"
    "dpad     . buttons buttons";
  grid-gap: 10px;
  padding: 20px;
  background-color: #333;
  border-radius: 15px;
  width: 300px;
  height: 400px;
}

.button, .stick, .trigger, .dpad div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 14px;
  text-transform: uppercase;
}

.dpad {
  grid-area: dpad;
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-gap: 5px;
}

.dpad-up { grid-area: up; }
.dpad-down { grid-area: down; }
.dpad-left { grid-area: left; }
.dpad-right { grid-area: right; }

.button-triangle { background-color: green; }
.button-square { background-color: blue; }
.button-circle { background-color: red; }
.button-cross { background-color: lightblue; }

.stick {
  background-color: #555;
}

.left-stick { grid-area: stick-left; }
.right-stick { grid-area: stick-right; }

.trigger {
  width: 70px;
  height: 30px;
  border-radius: 10px;
  background-color: #777;
}

.trigger-l1 { grid-area: l1; }
.trigger-l2 { grid-area: l2; }
.trigger-r1 { grid-area: r1; }
.trigger-r2 { grid-area: r2; }

.buttons {
  grid-area: buttons;
  display: grid;
  grid-template-areas:
    ". triangle ."
    "square . circle"
    ". cross .";
  grid-gap: 5px;
}