How To Make An Cool Toogle Switch With only Html and CSS Posted by Yahya Benlachheb on September 21, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Toggle switch</title> </head> <body> <label class="s"> <input type="checkbox"> <span class="s1"></span> </label> <label class="s"> <input type="checkbox"> <span class="s2"></span> </label> </body> </html> CSS CODE .s{ position: relative; padding: 20px; } .s input{ display: none; } .s1{ width: 100px; height: 40px; background: #ccc; display: block; overflow: hidden; cursor: pointer; transition: 0.4s; } .s1:before{ content: ''; position: absolute; width: 32px; height: 32px; left: 4px; bottom: 4px; background: white; } .s input:checked + .s1{ background: #03a9f4; } .s input:checked + .s1:before{ left: 64px; } .s2{ width: 100px; height: 40px; background: #ccc; display: block; overflow: hidden; cursor: pointer; transition: 0.4s; border-radius: 20px; } .s2:before{ content: ''; position: absolute; width: 32px; height: 32px; left: 4px; bottom: 4px; background: white; border-radius: 50%; } .s input:checked + .s2{ background: #03a9f4; } .s input:checked + .s2:before{ left: 64px; } Comments
Comments
Post a Comment