<div class="counter-button">
  <input id="my-counter" type="number" value="0" />
  <button commandfor="my-counter" command="--add-num" value="10">+10</button>
  <button commandfor="my-counter" command="--add-num" value="50">+50</button>
  <button commandfor="my-counter" command="--add-num" value="100">+100</button>
</div>

@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap");

.counter-button {
  display: flex;

  > * {
    margin-right: -0.35rem;
  }
}

::-webkit-inner-spin-button {
  display: none !important;
}

input[type="number"] {
  -moz-appearance: textfield;
  min-width: 50px;
  text-align: center;
  font-family: "Fira Mono", monospace;
  border-image: repeating-linear-gradient(
    to right in oklab,
    oklch(80% 0.4 222) 0%,
    oklch(35% 0.5 313) 100%
  );
  border-width: 0.35rem;
  border-image-slice: 1;
  background: #333;
  color: #fff;
  font-size: 2rem;
  padding: 1rem;
}

button {
  --color-1: oklch(35% 0.5 313);
  --color-2: oklch(50% 0.3 320);
  margin: 0;
  font-family: "Fira Mono", monospace;
  color: #fff;
  border-width: 0.35rem;
  border-image-slice: 1;
  background: #222;
  color: limegreen;
  cursor: pointer;
  padding: 0 1rem;
  font-size: 1.1rem;
  border-image-source: repeating-linear-gradient(
    to right in oklab,
    var(--color-1) 0%,
    var(--color-2) 100%
  );
  &:nth-of-type(2) {
    --color-1: oklch(50% 0.3 320);
    --color-2: oklch(60% 0.4 320);
  }
  &:nth-of-type(3) {
    --color-1: oklch(60% 0.4 320);
    --color-2: oklch(80% 0.4 320);
  }
  &:is(:hover, :focus-visible) {
    background-image: repeating-linear-gradient(
      to right in oklab,
      var(--color-1) 0%,
      var(--color-2) 100%
    );
    color: #fff;
    transition: color 0.3s ease-out;
  }
}

@layer presentation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    place-content: center;
    font-family: "Fira Mono", monospace;
    place-items: center;
    background-image: radial-gradient(
      closest-corner circle at 50% 50% in oklab,
      #c0ffee 0%,
      #474056
    );
  }
}

const counter = document.getElementById("my-counter");
counter.addEventListener("command", (e) => {
  if (e.command === "--add-num") {
    counter.value = Number(counter.value) + Number(e.source.value);
  }
});