<div id="saveChanges" class="button" tabindex="0" role="button">
  Save
</div>

<p>Some text to go along with the button</p>
.button {
  border: 3px solid limegreen;
  border-radius: 15px;
  width: 5em;
  padding: 0.25em;
  text-align: center;
}

.button:focus {
  outline: none;
  box-shadow: 3px 3px green;
}

const buttons = document.querySelectorAll(".button");

[...buttons].forEach((button) => {
  button.addEventListener("pointerdown", (event) => {
    doSomething(button);
  });
  button.addEventListener("keydown", (event) => {
    if (event.key == "Enter" || event.key == " ") {
      doSomething(button);
    }
  });
});

function doSomething(button) {
  let pressed = button.getAttribute("aria-pressed") === "false";

  if (pressed) {
    button.setAttribute("aria-pressed", "true");
  } else {
    button.setAttribute("aria-pressed", "false");
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.