Simulating squishy rubber (elastomer) buttons, inspired by designs on Dribbble
A Pen by Justin Windle on CodePen.
<div class="container"> | |
<div class="toggle"> | |
<input type="checkbox"> | |
<span class="button"></span> | |
<span class="label">+</span> | |
</div> | |
<div class="toggle"> | |
<input type="checkbox" checked> | |
<span class="button"></span> | |
<span class="label">–</span> | |
</div> | |
</div> |
@import compass | |
// Squishy buttons inspired by http://goo.gl/bFCyS | |
@import url(http://fonts.googleapis.com/css?family=Lato:700) | |
html, body | |
font-family: 'Lato', sans-serif | |
background: url(http://s.cdpn.io/1715/dark_stripes.png) | |
text-align: center | |
height: 100% | |
.container | |
text-align: center | |
position: absolute | |
margin-top: -80px | |
width: 100% | |
top: 50% | |
.toggle | |
margin: 4px | |
display: inline-block | |
.toggle | |
$size: 140px | |
box-shadow: inset 0 0 35px 5px rgba(0,0,0,0.25), inset 0 2px 1px 1px rgba(255,255,255,0.9), inset 0 -2px 1px 0 rgba(0,0,0,0.25) | |
border-radius: 8px | |
background: #ccd0d4 | |
position: relative | |
height: $size | |
width: $size | |
&:before | |
$radius: $size * 0.845 | |
$glow: $size * 0.125 | |
box-shadow: 0 0 $glow $glow / 2 #fff | |
border-radius: $radius | |
background: #fff | |
position: absolute | |
margin-left: ( $radius - $glow ) * -0.5 | |
margin-top: ( $radius - $glow ) * -0.5 | |
opacity: 0.2 | |
content: '' | |
height: $radius - $glow | |
width: $radius - $glow | |
left: 50% | |
top: 50% | |
.button | |
$radius: $size * 0.688 | |
-webkit-filter: blur(1px) | |
-moz-filter: blur(1px) | |
filter: blur(1px) | |
transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000) | |
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.5), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2) | |
border-radius: $radius | |
position: absolute | |
background: #ccd0d4 | |
margin-left: $radius * -0.5 | |
margin-top: $radius * -0.5 | |
display: block | |
height: $radius | |
width: $radius | |
left: 50% | |
top: 50% | |
.label | |
transition: color 300ms ease-out | |
text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0,0,0,0.8), 1px 1px 4px #fff | |
line-height: $size - 1 | |
text-align: center | |
position: absolute | |
font-weight: 700 | |
font-size: 42px | |
display: block | |
opacity: 0.9 | |
height: 100% | |
width: 100% | |
color: rgba(0,0,0,0.4) | |
input | |
opacity: 0 | |
background :red | |
position: absolute | |
cursor: pointer | |
z-index: 1 | |
height: 100% | |
width: 100% | |
left: 0 | |
top: 0 | |
&:active | |
~ .button | |
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 30px 1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 25px 0 rgba(0,0,0,0.4), inset 0 0 10px 1px rgba(255,255,255,0.6) | |
~ .label | |
font-size: 40px | |
color: rgba(0,0,0,0.45) | |
&:checked | |
~ .button | |
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 25px -1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 20px 0 rgba(0,0,0,0.2), inset 0 0 5px 1px rgba(255,255,255,0.6) | |
~ .label | |
font-size: 40px | |
color: rgba(0,0,0,0.4) |