:focus-visible {
  outline: 4px dashed orange;
}

.app {
  display: flex;
  box-sizing: border-box;
  margin: 2rem auto;
  padding: 2rem;
  width: calc(100% - 4rem);
  min-width: 200px;
  background-color: #fff;
  border-radius: 0.5rem;
  font-size: 1.5rem;
}

.custom-button {
  display: inline-flex;
  justify-content: center;
  background-color: #f1f2f3;
  min-width: 140px;
  box-shadow: inset -3px -3px 6px 0 rgba(#000, 0.15),
    1px 1px 2px 0 rgba(#000, 0.15), 2px 2px 4px 0 rgba(#000, 0.15);
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  cursor: pointer;

  &:active {
    box-shadow: inset 3px 3px 6px 0 rgba(#000, 0.15),
      -1px -1px 2px 0 rgba(#000, 0.15), -2px -2px 4px 0 rgba(#000, 0.15);
  }
}

.button-demo-message {
  padding: 2rem;
  font-size: 1.2rem;
  border: 1px solid #dadada;
  margin: 2rem 0 0;

  &:empty {
    display: none;
  }
}

import React from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";

//////////////////////

function CustomButton({ onClick, children, ...restProps }) {
  const onKeyDown = (e) => {
    if (e.key === "Enter" || e.key === "Spacebar") {
      onClick(e);
    }
  };

  return (
    <span
      className="custom-button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={onKeyDown}
      {...restProps}
    >
      {children}
    </span>
  );
}

function App() {
  const [clickedMessage, setClicked] = React.useState("");

  const onClick = (_) => {
    setClicked("button clicked!");
    setTimeout(() => setClicked(""), 350);
  };

  return (
    <div className="button-demo">
      <CustomButton onClick={onClick}>Click Me</CustomButton>

      <div className="button-demo-message" aria-live="polite">
        {clickedMessage}
      </div>
    </div>
  );
}

// Render
ReactDOM.render(<App />, document.getElementById("root"));