<button id="target-button">
   Add Dog
</button>

<fieldset>
   <legend>Button class controls</legend>
   <label>
      Visually-hidden
      <input type="radio" name="radios" id="visuallyHidden" />
   </label>
   <label>
      Opacity
      <input type="radio" name="radios" id="opacityNone" />
   </label>
   <label>
      Display
      <input type="radio" name="radios" id="displayNone" />
   </label>
   <label>
      Visibility
      <input type="radio" name="radios" id="visibilityHidden" />
   </label>
   <label>
      None
      <input type="radio" name="radios" id="none" />
   </label>
</fieldset>

#target-button {
   background-color: black;
   border: none;
   color: white;
   // display: block;
   font-size: 1.25em;
   font-weight: bold;
   margin: 0.5em 0;
   padding: 0.25em 0.5em;

   &.visuallyHidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
   }
   &.opacityNone {
      opacity: 0;
   }
   &.displayNone {
      display: none;
   }
   &.visibilityHidden {
      visibility: hidden;
   }
}

* {
   font-family: sans-serif;
}
fieldset {
   border: none;
   margin-top: 1em;
   padding: 0;
}
legend {
   font-weight: bold;
   margin: 0 0 0.5em;
}
label {
   border: 1px solid #ccc;
   border-radius: 5em;
   display: inline-block;
   margin-bottom: 1em;
   margin-right: 1em;
   padding: 0.25em;
}
label.selected {
   background-color: #ccc;
}

const button = document.querySelector("button#target-button");
const radioLabels = Array.from(document.querySelectorAll("label"));

radioLabels.forEach((label, index) => {
   const radio = label.querySelector("input");

   radio.addEventListener("change", (event) => {
      if (event.target.id === "none") {
         button.removeAttribute("class");
      } else {
         button.setAttribute("class", event.target.id);
      }
   });
});