- .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>
- 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;}