HTML <button>

<button class="favorite styled" type="button"></button>

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}

<button name="favorite">
  <svg fill="black" viewBox="0 0 42 42">
    <path
      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
  </svg>
  
</button>

<button type="button" name="button"></button>

<button type="button" commandfor="mydialog" command="show-modal">
  
</button>
<dialog id="mydialog">
  <div class="wrapper">
    <form>
      <fieldset>
        <legend></legend>
        <div>
          <input type="radio" id="no" name="close" value="no" checked />
          <label for="no"></label>
        </div>
        <div>
          <input type="radio" id="yes" name="close" value="yes" />
          <label for="yes"></label>
        </div>
      </fieldset>
    </form>
    <button commandfor="mydialog" command="request-close">
      
    </button>
    <p class="warning" hidden></p>
  </div>
</dialog>

.warning {
  color: tomato;
}

const dialog = document.querySelector("dialog");
const radio = document.querySelector("form").elements["close"];
const warning = document.querySelector(".warning");

dialog.addEventListener("cancel", (e) => {
  if (!e.cancelable) return;
  if (radio.value === "no") {
    warning.hidden = false;
    e.preventDefault();
  } else {
    warning.hidden = true;
  }
});

<button commandfor="confirm-dialog" command="show-modal"></button>
<dialog id="confirm-dialog">
  <header>
    <h1>?</h1>
  </header>
  <p></p>
  <footer>
    <button commandfor="confirm-dialog" command="close" value="cancel">
      
    </button>
    <button commandfor="confirm-dialog" command="close" value="delete">
      
    </button>
  </footer>
</dialog>

<pre id="log"></pre>

#log {
  height: 20px;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = text;
}

const dialog = document.getElementById("confirm-dialog");

dialog.addEventListener("close", () => {
  switch (dialog.returnValue) {
    case "cancel":
      log("");
      break;
    case "delete":
      log("");
      break;
    default:
      log(": ", dialog.returnValue);
  }
});