Create toggle button using checkbox - HTML CSS CSS Form

HTML CSS examples for CSS Form:input checkbox

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input checkbox

Description

Create toggle button using checkbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  gc-nomade</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

body {<!-- ww  w  .j a  v  a  2s.c  o  m-->
   min-height:100vh;
   margin:0;
}
html {
   height:100%;
}
html,body {
   display:flex;
   flex-direction:column;
}
header {
   margin:0 0 10px ;
   background:rgb(52, 110, 174);
}
footer {
   background:rgb(173, 53, 54);
   margin:10px 0 0px ;
}
main {
   flex:1;
   display:flex;
}
aside {
   width:250px;
   background:rgb(53, 174, 79);
}
section {
   flex:1;
   margin-left:10px;
   background:rgb(190, 67, 181);
}
/* for the fun */
header,footer,aside,section {
   font-size:3vmax;
   color:white;
   display:flex;
   align-items:center;
   justify-content:center;
   line-height:2em;
}
#menu {
   position:absolute;
   right:100%;
}
[for="menu"] {
   position:absolute;
   margin:auto;
   right:1em;
   height:1em;
   line-height:1em;
   cursor:pointer;
   font-size:16px;
   background:rgba(255,255,255,0.2);
}
[for="menu"]:before {
   transition:0.25s;
   box-shadow:0 0 3px black;
   text-shadow:0 0 1px black;
   border-radius:5px;
   content:'Hide menu';
   word-spacing:0.5em;
   background:crimson;
   padding:0.25em;
}
aside {transition:0.25s;}
#menu:checked ~ main aside {
   margin-left:-260px;
}
#menu:checked ~ header [for="menu"]:before {
   content:'Show menu';
   word-spacing:initial;background:rgb(53, 174, 79);
}


      </style> 
 </head> 
 <body translate="no"> 
  <input type="checkbox" id="menu"> 
  <header>
    header 
   <label for="menu"></label> 
  </header> 
  <main> 
   <aside>
     aside 
   </aside> 
   <section>
     section or single div 
   </section> 
  </main> 
  <footer>
    footer 
  </footer>  
 </body>
</html>

Related Tutorials