多組創意的CSS3開關切換按鈕代碼



235 938 313



特效描述:多組創意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

加群請備注:從官網了解到

老夫子电子