Beispiel:Button-1.html
Aus SELFHTML-Wiki
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>SPOT CSS - 1</title>
<style>
:root {
--base-font: 16px;
}
body {
font-family: sans-serif;
padding: 2rem;
}
.controls {
margin-bottom: 2rem;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.btn-px {
padding: 6px 16px;
border: 1px solid green;
background: oklch(0.6 0.2 18);
border-radius: 0 8px 8px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #333;
font-size: var(--base-font);
line-height: 20px;
}
.btn-em {
font-size: var(--base-font); line-height: 1.5; padding: 0.9em 1.4em; background: oklch(0.6 0.1 120); color: white; text-shadow: 0 -.05em .05em #333; border: medium solid oklch(0.4 0.1 120);
border-radius: 0 .4em .4em;
box-shadow: 0 .2em .4em gray;
}
output {
font-family: monospace;
margin-left: .5rem;
}
</style> <script> document.addEventListener('DOMContentLoaded', function () { const slider = document.getElementById("fontSlider"); const display = document.getElementById("fontValue");
slider.addEventListener("input", () => {
const size = slider.value + "px";
document.documentElement.style.setProperty("--base-font", size);
display.textContent = size;
});
}); </script> </head>
<body>
SPOT CSS - Buttons gestalten
<label for="fontSlider">Schriftgröße:</label> <input id="fontSlider" type="range" min="12" max="64" value="16" step="1"> <output id="fontValue">16px</output>
</body> </html>
