使用CSS切换按钮

Question

我设计了一个水平切换按钮,我试图让它垂直过渡.

您可以在Horizo​​ntal Toggle按钮上查找我的CSS演示CSS代码演示有人可以指出我需要做什么才能使它垂直吗？我是CSS和HTML的新手

Refer to my code at jsfiddle

Answer 1

用以下内容替换你的css ..

http://jsfiddle.net/ZX6hF/8/

要么

http://jsfiddle.net/ZX6hF/9/

html{ height:100%; }
body{
  font:14px/1 Arial; 
  text-align:center;
  color:#333; 
  background-color:#EEE; 
  height:100%; 
  background:#DDD; 
}
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; }

检查样品这里.. !!! 点击