Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Toggle button using CSS

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


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Toggle button using CSS


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription