gpt4 book ai didi

html - 使用 CSS 切换按钮

转载 作者:行者123 更新时间:2023-11-28 04:35:10 25 4
gpt4 key购买 nike

我设计了一个水平切换按钮,我试图通过垂直过渡使其垂直。

您可以在Horizontal Toggle button CSS Code Demo 找到我的CSS 演示。有人可以指出需要做什么才能使其垂直吗?我是 CSS 和 HTML 的新手

Refer to my code at jsfiddle

最佳答案

用下面的 .. 替换你的 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; }

在此处检查示例 ..!!! click

关于html - 使用 CSS 切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21897659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com