Skip to content

Instantly share code, notes, and snippets.

@diamantidis

diamantidis/index.html

Last active October 17, 2021 17:29
Show Gist options
  • Save diamantidis/20f92ff8e582b7b1e61c993c44943726 to your computer and use it in GitHub Desktop.
Save diamantidis/20f92ff8e582b7b1e61c993c44943726 to your computer and use it in GitHub Desktop.
Download ZIP
HTML page with a title and a toggle switch
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
label.switch { outline: none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; outline: none; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
</style>
</head>
<body>
<h2 id="value">Toggle Switch is off</h2>
<label class="switch">
<input type="checkbox" name="myCheckbox">
<span class="slider round"></span>
</label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment