Collection of some fresh, flat toggles. All utilize the "checkbox" hack. See: http://css-tricks.com/the-checkbox-hack/
Which # do you like best?
A Pen by Bennett Feely on CodePen.
<figure> | |
<div class="toggle"> | |
<input id="a" type="checkbox" /> | |
<label for="a"> | |
<div class="card flip"></div> | |
</label> | |
</div> | |
</figure> | |
<figure> | |
<div class="toggle"> | |
<input id="b" type="checkbox" /> | |
<label for="b"> | |
<div class="card grow"></div> | |
</label> | |
</div> | |
</figure> | |
<figure> | |
<div class="toggle slide"> | |
<input id="c" type="checkbox" /> | |
<label for="c"> | |
<div class="card slide"></div> | |
</label> | |
</div> | |
</figure> | |
<figure> | |
<div class="toggle slide2"> | |
<input id="d" type="checkbox" /> | |
<label for="d"> | |
<div class="card"></div> | |
</label> | |
</div> | |
</figure> |
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); | |
html { | |
font:100%/1 "Montserrat"; | |
} | |
html, body, figure { display:flex; } | |
html, body { | |
justify-content:center; | |
color:gray; | |
height:100%; | |
} | |
body { | |
text-align:center; | |
counter-reset:count; | |
background:gainsboro; | |
width:80%; | |
} | |
figure { | |
flex:1; | |
flex-direction:column; | |
justify-content:center; | |
counter-increment:count; | |
} | |
figure:after { | |
font-size:2rem; | |
content:counter(count); | |
opacity:.5; | |
} | |
.toggle { | |
display:flex; | |
position:relative; | |
width:7.5rem; | |
height:2.5rem; | |
background:white; | |
align-self:center; | |
user-select:none; | |
margin:2rem; | |
} | |
.toggle:after, .toggle:before { | |
flex:1; | |
text-align:center; | |
line-height:2.5rem; | |
} | |
.toggle:after { | |
content:"ON"; | |
} | |
.toggle:before { | |
content:"OFF"; | |
} | |
input { display:none; } | |
label { | |
position:absolute; | |
top:0; left:0; right:0; bottom:0; | |
perspective:1000; | |
cursor:pointer; | |
} | |
.card { | |
position:relative; | |
background:limegreen; | |
transition:.4s; | |
width:50%; | |
height:2.5rem; | |
pointer-events:none; | |
} | |
input:checked + label .card { background:tomato; } | |
.flip { | |
transform:perspective(200) rotateY(0); | |
transform-origin:center right; | |
transform-style:preserve-3d; | |
} | |
input:checked + label .flip { | |
transform:perspective(200) rotateY(180deg); | |
} | |
.grow { | |
animation:grow-rev .4s 1 both; | |
} | |
input:checked + label .grow { | |
animation:grow .4s 1 both; | |
} | |
@keyframes grow { | |
50%{ transform:translateX(1.875rem) scale(2) } | |
to { transform:translateX(3.75rem); } | |
} | |
@keyframes grow-rev { | |
from { transform:translateX(3.75rem); } | |
50%{ transform:translateX(1.875rem) scale(2) } | |
to { transform:translateX(0rem); } | |
} | |
.slide .card { transform:translate(0); } | |
.slide input:checked + label .card { | |
transform:translateX(3.75rem); | |
} | |
.slide2 { overflow:hidden; } | |
.slide2 .card { | |
transform:translate(0); | |
background:transparent; | |
box-shadow: | |
-3.75rem 0 limegreen, | |
3.75rem 0 tomato; | |
} | |
.slide2 input:checked + label .card { | |
transform:translateX(3.75rem); | |
background:transparent; | |
} |
Collection of some fresh, flat toggles. All utilize the "checkbox" hack. See: http://css-tricks.com/the-checkbox-hack/
Which # do you like best?
A Pen by Bennett Feely on CodePen.