字号: - o +

纯CSS实现开关按钮

2013-03-08 前端开发 10人评论 44,897次浏览   

子曰:把希望建筑在意欲和心愿上面的人们,二十次中有十九次都会失望 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

今天主要介绍一个纯CSS写的开关:

点此查看开关效果

<div class="switch">
	<input type="checkbox" id="switch" class="switch-check">
	<label for="switch" class="switch-label">
		Check
		<span></span>
	</label>
</div>

CSS样式:

.switch {
	background-color:rgba(0,0,0,0.2);
	border-radius:30px;
	border:4px solid rgba(58,58,58,0.1);
	box-shadow:0 0 6px  rgba(0,0,0,0.5) inset;
	height:42px;
	margin:40px;
	position:relative;
	width:115px;
}
.switch-check {
	position:absolute;
	visibility:hidden;
}
.switch-label {
	cursor:pointer;
	display:block;
	height:42px;
	text-indent:-9999px;
	width:115px;
}
.switch-label:before {
	background:#fff;
	background:-moz-radial-gradient(45%,circle,rgb(255,58,58) 0%,rgb(255,113,113) 100%);
	background:-webkit-radial-gradient(45%,circle,rgb(255,58,58) 0%,rgb(255,113,113) 100%);
	background:-o-radial-gradient(45%,circle,rgb(255,58,58) 0%,rgb(255,113,113) 100%);
	border-radius:10px;
	border:1px solid #742323;
	box-shadow:0 2px 5px  rgba(255,67,48,0.6),0 0 5px rgba(255,159,109,0.5) inset;
	content:"";
	display:block;
	height:10px;
	left:-20%;
	position:absolute;
	top:16px;
	-webkit-transition:all 0.2s;
	-moz-transition:all 0.2s;
	-o-transition:all 0.2s;
	transition:all 0.2s;
	width:10px;
	z-index:12;
}
.switch-label:after {
	background:#fff;
	background:-moz-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);
	background:-webkit-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);
	background:-o-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);
	border-radius:10px;
	border:1px solid #111;
	box-shadow:0 2px 5px rgba(20,20,20,0.5);
	content:"";
	display:block;
	height:10px;
	right:-20%;
	position:absolute;
	top:16px;
	-webkit-transition:all 0.2s;
	-moz-transition:all 0.2s;
	-o-transition:all 0.2s;
	transition:all 0.2s;
	width:10px;
	z-index:12;
}
.switch-label span {
	background:-webkit-linear-gradient(#4f4f4f,#2b2b2b);
	background:-moz-linear-gradient(#4f4f4f,#2b2b2b);
	background:-o-linear-gradient(#4f4f4f,#2b2b2b);
	background:linear-gradient(#4f4f4f,#2b2b2b);
	border-radius:30px;
	border:1px solid #1a1a1a;
	box-shadow:0 0 4px  rgba(0,0,0,0.5),0 1px 1px rgba(255,255,255,0.1) inset,0 -2px 0 rgba(0,0,0,0.2) inset;
	display:block;
	height:38px;
	left:1px;
	position:absolute;
	top:1px;
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;
	width:53px;
}
.switch-label span:before {
	background:#fff;
	background:-webkit-linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	background:-moz-linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	background:-o-linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	background:linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	border-radius:30px 10px 10px 30px;
	box-shadow:-2px 0 5px  rgba(0,0,0,0.2) inset;
	content:"";
	display:block;
	height:33px;
	left:2px;
	position:absolute;
	top:2px;
	width:21px;
}
.switch-label span:after {
	background:#fff;
	background:-webkit-linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	background:-moz-linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	background:-o-linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	background:linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));
	border-radius:10px 30px 30px 10px;
	box-shadow:2px 0 5px  rgba(0,0,0,0.2) inset;
	content:"";
	display:block;
	height:33px;
	position:absolute;
	right:2px;
	top:2px;
	width:21px;
}
.switch-check:checked + .switch-label span {
	left:59px;
}
.switch-check:checked + .switch-label:before {
	background:-moz-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);
	background:-webkit-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);
	background:-o-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);
	border:1px solid #111;
	box-shadow:0 2px 5px rgba(20,20,20,0.5);
}
.switch-check:checked + .switch-label:after {
	background:-moz-radial-gradient(45%,circle,rgb(128,215,255) 0%,rgb(197,237,255) 100%);
	background:-webkit-radial-gradient(45%,circle,rgb(128,215,255) 0%,rgb(197,237,255) 100%);
	background:-o-radial-gradient(45%,circle,rgb(128,215,255) 0%,rgb(197,237,255) 100%);
	border:1px solid #004562;
	box-shadow:0 2px 5px  rgba(81,208,255,0.5),0 0 5px rgba(210,243,255,0.5) inset;
}

效果见下图并附上演示:

kaiguan

点此查看开关效果

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论8条 ,博主回复2

  1. 我天 这么漂亮!

    Likecer03-24 11:27 回复
  2. 在IE6面前 还是弱爆哦了 嘿嘿

    疾风03-11 16:39 回复
  3. 很不错,可以作为评论防垃圾,嘿嘿

    小鬼哥03-11 08:07 回复
    • 想法不错,比划拉方便

      bbis03-12 10:56 回复
  4. 效果不错,CSS越来越强大了

    神算子03-10 21:13 回复
  5. 不错哦

    kn007 03-10 16:35 回复
  6. 这个很不错啊

    麦子花开03-10 12:43 回复
  7. 很好看啊,有得抄还好,自己去写就悲催了,哈哈

    花少03-10 09:25 回复

发表我的评论

*

*

取消