Last active
October 17, 2021 17:29
-
-
Save diamantidis/20f92ff8e582b7b1e61c993c44943726 to your computer and use it in GitHub Desktop.
HTML page with a title and a toggle switch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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