Beispiel:HTML-Tut-button-5.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
.toggle label {
position: relative;
display: inline-block;
width: 10em;
height: 3.5em;
}
.toggle input {
display: none;
}
.toggle .slider { /* Grundfläche */
position: absolute;
cursor: pointer;
top: 1.5em;
left: 3em;
width: 4em;
height: 2em;
background-color: #c32e04; /* red */
transition: all .3s ease-in-out;
border-radius: 1em;
}
.toggle .slider:before { /* verschiebbarer Button */
position: absolute;
content: "";
height: 1.6em;
width: 1.6em;
left: 0.2em;
bottom: 0.2em;
background-color: white;
border-radius: 50%;
transition: all .3s ease-in-out;
}
.toggle input:checked + .slider {
background-color: #5a9900; /* green */
}
.toggle input:focus + .slider {
background-color:pink;
box-shadow: 0 0 1px #5a9900;
}
.toggle input:checked + .slider:before {
transform: translateX(1.9em);
}
.text .slider:after { /* Text vor dem FlipFlop-Schalter */
position: absolute;
content: "AUS";
color: #c32e04;
font-weight: bold;
height: 1.6em;
left: -2.5em;
bottom: 0.2em;
}
.text input:checked + .slider:after { /* Text hinter dem FlipFlop-Schalter */
position: absolute;
content: "AN";
color: #5a9900;
left: 4.5em;
}
h2, div {margin-left:2em;}
</style>
<title>FlipFlop-Schalter</title>
</head>
<body>
<h1>FlipFlop-Schalter</h1>
<h2>ohne CSS</h2>
<div class="ohne">
<label>
An-/Aus-Schalter
<input type="checkbox">
<span></span>
</label>
</div>
<h2>mit CSS</h2>
<div class="toggle">
<label>
An-/Aus-Schalter
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<h2>mit Text</h2>
<div class="toggle text">
<label>
An-/Aus-Schalter
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</body>
</html>
