개인적으로 Flex 관련 공부하다 예제가 있어서 올립니다.

[code]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test03.html</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #333;
      }
      .buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        max-width: 140px;
        gap: 20px;
      }
      .buttons label {
        position: relative;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .buttons label input {
        appearance: none;
      }
      .buttons label span {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(#555353, #363535, #303030);
        border: 2px solid #222;
        border-radius: 6px;
        box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.35), 0 5px 5px rgba(0, 0, 0, 0.5), 0 15px 25px rgba(0, 0, 0, 0.35);
      }
      .buttons label input:checked ~ span {
        box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), inset 0 5px 5px rgba(0, 0, 0, 0.5),
          inset 0 15px 25px rgba(0, 0, 0, 0.35);
      }
      .buttons label span::before {
        content: "";
        position: absolute;
        inset: 5px 3px;
        border-top: 1px solid #ccc;
        filter: blur(2px);
      }
      .buttons label i {
        position: relative;
        z-index: 10;
        font-size: 1.5em;
        color: #111;
      }
      .buttons label input:checked ~ i {
        color: #fff;
        text-shadow: 0 0 5px #219cf3, 0 0 8px #219cf3;
      }
    </style>
  </head>
  <body>
    <div class="buttons">
      <label>
        <input type="checkbox" name="check" />
        <span></span>
        <i class="fa-solid fa-phone"></i>
        <!-- <i class="fa-solid fa-phone"></i> -->
      </label>
      <label>
        <input type="checkbox" name="check" />
        <span></span>
        <i class="fa-solid fa-plane"></i>
        <!-- <i class="fa-solid fa-phone"></i> -->
      </label>
      <label>
        <input type="checkbox" name="check" />
        <span></span>
        <i class="fa-solid fa-moon"></i>
        <!-- <i class="fa-solid fa-phone"></i> -->
      </label>
      <label>
        <input type="checkbox" name="check" />
        <span></span>
        <i class="fa-solid fa-wifi"></i>
        <!-- <i class="fa-solid fa-phone"></i> -->
      </label>
    </div>
  </body>
</html>

[/code]