CSSの「:checked 疑似クラス」を利用して、checkboxをトグルボタンにします。

次のcheckboxのどれかにチェックを入れると、そのcheckboxのidとアトリビュート（data-value）による指定を、「:checked 疑似クラス」と間接セレクタ「~」を使って、親要素が同じ兄弟要素であるdiv要素（下側の薄い緑色の背景の部分）の中にあるclass名が「button」の3つの要素（左からa要素、button要素、input要素）に対して適用します。チェックを外すと元に戻ります。

サンプルのhtmlソース

.button {
	<input type=checkbox id="border" data-value="0">
	<input type=checkbox id="border-radius" data-value="0.25rem">
	<input type=checkbox id="background" data-value="#1E88E5">
	<input type=checkbox id="color" data-value="white">
	<input type=checkbox id="font-family" data-value="system-ui, sans-serif">
	<input type=checkbox id="font-size" data-value="1rem">
	<input type=checkbox id="line-height" data-value="1.2">
	<input type=checkbox id="white-space" data-value="nowrap">
	<input type=checkbox id="text-decoration" data-value="none">
	<input type=checkbox id="padding" data-value="0.25rem 0.5rem">
	<input type=checkbox id="margin" data-value="0.25rem">
	<input type=checkbox id="cursor" data-value="pointer">
}
<div class='demo-container'>　
 	<a href="#0" class="button" role="button">Button</a>　
 	<button class="button">Button</button>　
 	<input class="button" type="submit" value="Button" />　
</div>
<div class=css></div>

サンプルのCSSソース

div.demo-container {
  font-family: sans-serif;
  background-color: #dfd;
  color: black;
  display: block;
  padding: 2em;
  width: 80%;
  height: 60px;
  margin: 1em;
}
input[type=checkbox] {
  margin-left: 2em;
  display: block;
  font-size:15px;
  line-height:15px;
}
input[type=checkbox]:after {
  content: attr(id) ": " attr(data-value) ";";
  font-family: monospace;
  color: #333;
  display: block;
  position: relative;
  width: 25em;
  left: 1.5em;
}
input[type=checkbox]#border:checked ~ div .button {border:0;}
input[type=checkbox]#border-radius:checked ~ div .button {border-radius:0.25rem;}
input[type=checkbox]#background:checked ~ div .button {background:#1E88E5;}
input[type=checkbox]#color:checked ~ div .button {color:white;}
input[type=checkbox]#font-family:checked ~ div .button {font-family:system-ui, sans-serif;}
input[type=checkbox]#font-size:checked ~ div .button {font-size:1rem;}
input[type=checkbox]#line-height:checked ~ div .button {line-height:1.2;}
input[type=checkbox]#white-space:checked ~ div .button {white-space:nowrap;}
input[type=checkbox]#text-decoration:checked ~ div .button {text-decoration:none;}
input[type=checkbox]#padding:checked ~ div .button {padding:0.25rem 0.5rem;}
input[type=checkbox]#margin:checked ~ div .button {margin:0.25rem;}
input[type=checkbox]#cursor:checked ~ div .button {cursor:pointer;}