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;
}
#fontSlider {vertical-align:middle;}
.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>
<h1>SPOT CSS - Buttons gestalten</h1>
<div class="controls">
<label for="fontSlider">Schriftgröße:</label>
<input id="fontSlider" type="range" min="12" max="64" value="16" step="1">
<output id="fontValue">16px</output>
</div>
<div class="buttons">
<button class="btn-px">Button mit px</button>
<button class="btn-em">Button mit em</button>
</div>
</body>
</html>
