多组创意的CSS3开关切换按钮代码



228 911 304



特效描述:多组创意CSS3开关 切换按钮,纯css3制作创意的开关按钮切换。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">

2. HTML代码

<h1>A bunch of funky CSS3 Toggle Buttons <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>
<h2 class="headingOuter">Day/Night Toggle</h2>
<div class="toggle toggle--daynight">
	<input type="checkbox" id="toggle--daynight" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/1836048-Emojis-Pt-1?list=searches&offset=3 -->
<h2 class="headingOuter">Like Toggle</h2>
<div class="toggle toggle--like">
	<input type="checkbox" id="toggle--like" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--like"><span class="toggle--feature"></span></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/408190-Quick-Setting-Toggles?list=searches&tag=toggle_button&offset=0 -->
<h2 class="headingOuter">Shadow Effect Toggle</h2>
<div class="toggle toggle--text">
	<input type="checkbox" id="toggle--text" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--text" data-label-on="on"  data-label-off="off"></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/712038-Button?list=searches&tag=toggle_buttons&offset=23 -->
<h2 class="headingOuter">3d Power button toggles</h2>
<div class="toggle toggle--push">
	<input type="checkbox" id="toggle--push" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--push" data-label-on="on"  data-label-off="off"></label>
</div>
<div class="toggle toggle--push toggle--push--glow">
	<input type="checkbox" id="toggle--push--glow" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--push--glow" data-label-on="on"  data-label-off="off"></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/525358-Buttons-Lights-Shadows?list=searches&tag=toggle_button&offset=10 -->
<h2 class="headingOuter">Physical Toggle Switch</h2>
<div class="toggle toggle--knob">
	<input type="checkbox" id="toggle--knob" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--knob"><span class="toggle--feature" data-label-on="on"  data-label-off="off"></span></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/96984-MIT-Sloan-iPad-App-High-Resolution?list=searches&tag=toggle&offset=11 -->
<h2 class="headingOuter">Sliding Switch Toggle</h2>
<div class="toggle toggle--switch">
	<input type="checkbox" id="toggle--switch" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--switch"><span class="toggle--feature" data-label-on="on"  data-label-off="off"></span></label>
</div>
<!-- Inspiration – https://codepen.io/NobodyRocks/pen/qzfoc -->
<h2 class="headingOuter">Neon Text toggle</h2>
<div class="toggle toggle--neon">
	<input type="checkbox" id="toggle--neon" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--neon" data-label-on="on"  data-label-off="off"></label>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 切换按钮 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 表单 表单美化 表单插件 表单美化插件 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到