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

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

 

サンプルのhtmlソース

  1. .button {
  2. <input type=checkbox id="border" data-value="0">
  3. <input type=checkbox id="border-radius" data-value="0.25rem">
  4. <input type=checkbox id="background" data-value="#1E88E5">
  5. <input type=checkbox id="color" data-value="white">
  6. <input type=checkbox id="font-family" data-value="system-ui, sans-serif">
  7. <input type=checkbox id="font-size" data-value="1rem">
  8. <input type=checkbox id="line-height" data-value="1.2">
  9. <input type=checkbox id="white-space" data-value="nowrap">
  10. <input type=checkbox id="text-decoration" data-value="none">
  11. <input type=checkbox id="padding" data-value="0.25rem 0.5rem">
  12. <input type=checkbox id="margin" data-value="0.25rem">
  13. <input type=checkbox id="cursor" data-value="pointer">
  14. }
  15. <div class='demo-container'> 
  16. <a href="#0" class="button" role="button">Button</a> 
  17. <button class="button">Button</button> 
  18. <input class="button" type="submit" value="Button" /> 
  19. </div>
  20. <div class=css></div>

サンプルのCSSソース

  1. div.demo-container {
  2. font-family: sans-serif;
  3. background-color: #dfd;
  4. color: black;
  5. display: block;
  6. padding: 2em;
  7. width: 80%;
  8. height: 60px;
  9. margin: 1em;
  10. }
  11. input[type=checkbox] {
  12. margin-left: 2em;
  13. display: block;
  14. font-size:15px;
  15. line-height:15px;
  16. }
  17. input[type=checkbox]:after {
  18. content: attr(id) ": " attr(data-value) ";";
  19. font-family: monospace;
  20. color: #333;
  21. display: block;
  22. position: relative;
  23. width: 25em;
  24. left: 1.5em;
  25. }
  26. input[type=checkbox]#border:checked ~ div .button {border:0;}
  27. input[type=checkbox]#border-radius:checked ~ div .button {border-radius:0.25rem;}
  28. input[type=checkbox]#background:checked ~ div .button {background:#1E88E5;}
  29. input[type=checkbox]#color:checked ~ div .button {color:white;}
  30. input[type=checkbox]#font-family:checked ~ div .button {font-family:system-ui, sans-serif;}
  31. input[type=checkbox]#font-size:checked ~ div .button {font-size:1rem;}
  32. input[type=checkbox]#line-height:checked ~ div .button {line-height:1.2;}
  33. input[type=checkbox]#white-space:checked ~ div .button {white-space:nowrap;}
  34. input[type=checkbox]#text-decoration:checked ~ div .button {text-decoration:none;}
  35. input[type=checkbox]#padding:checked ~ div .button {padding:0.25rem 0.5rem;}
  36. input[type=checkbox]#margin:checked ~ div .button {margin:0.25rem;}
  37. input[type=checkbox]#cursor:checked ~ div .button {cursor:pointer;}

 

引用と参考;https://codepen.io/gumnos/pen/RyMqKr
戻るボタン