Toggle button using CSS


I designed a horizontal toggle button and I am trying to make it vertical with vertical transition.

You can look for my CSS demo at Horizontal Toggle button CSS Code Demo Can someone point me what needs to be done to make it vertical? I am new to CSS and HTML

Refer to my code at jsfiddle
Problem courtesy of: Santhosh


replace your css with the follwing ..


html{ height:100%; }
  font:14px/1 Arial; 
body::after{ content:''; display:inline-block; height:100%; vertical-align:middle; }

*{ margin:0; padding:0; }

            ul{ margin:0; padding:0; list-style:none; display:inline-block; width:300px; text-align:left; vertical-align:middle; }
                ul li{ line-height:30px; overflow:hidden; padding:4px 0; }

/* Actual code goes here */
      .togglebox input{ display:none; }
            .togglebox{ display:inline-block; border:1px solid #BBB; width:40px; height:90px; position:relative; border-radius:20px; color:#FFF; font-weight:bold; overflow:hidden; box-shadow:0 1px 0 #CCC; }
            .togglebox label{ width:40px; height:100%; line-height:200%; border-radius:0.4em; position:absolute; top:0; left:0; z-index:1; font-size:1.1em; cursor:pointer; -webkit-transition:height 0.12s; -moz-transition:height 0.12s; transition:height 0.12s; }
            .togglebox span{ position:absolute; top:-110px; }

            .togglebox label::before{ content:'ON'; width:40px; height:50px; float:left; margin-top:00px; padding-top:20px; padding-right:13px; text-align:center; background:#13E27F; text-shadow:0 -1px 0px #093B5C; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; }

            .togglebox label b{ display:block; height:40px; width:40px; float:left; position:relative; z-index:1; border:1px solid #AAA; background:#F6F6F6; box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5); border-radius:20px; margin-top:-20px; margin-left:-1px; }
            .togglebox label:hover b{ background:#E5E5E5; }
                .togglebox label::after{ content:'OFF'; width:40px; float:left;height:50px; padding-top:20px; padding-left:0px; text-align:center; background:#E70A25; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; margin-top:-20px;}
            .togglebox input:checked ~ label{ top:-50px; }

check the sample Here ..!!! click

Solution courtesy of: Deepak Sharma


Try adding this:

#togglebox {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
Discussion courtesy of: Matt Smith

This recipe can be found in it's original form on Stack Over Flow.