#212121
1.bauble_box .bauble_label { 2 background: #2c2; 3 background-position: 62px 5px; 4 background-repeat: no-repeat; 5 background-size: auto 5px; 6 border: 0; 7 border-radius: 50px; 8 box-shadow: inset 0 10px 20px rgba(0,0,0,.4), 0 -1px 0px rgba(0,0,0,.2), inset 0 -1px 0px #fff; 9 cursor: pointer; 10 display: inline-block; 11 font-size: 0; 12 height: 40px; 13 position: relative; 14 -webkit-transition: all 500ms ease; 15 transition: all 500ms ease; 16 width: 90px; 17} 18 19.bauble_box .bauble_label:before { 20 background-color: rgba(255,255,255,.2); 21 background-position: 0 0; 22 background-repeat: repeat; 23 background-size: 30% auto; 24 border-radius: 50%; 25 box-shadow: inset 0 -5px 25px #050, 0 10px 20px rgba(0,0,0,.4); 26 content: ''; 27 display: block; 28 height: 30px; 29 left: 5px; 30 position: absolute; 31 top: 6px; 32 -webkit-transition: all 500ms ease; 33 transition: all 500ms ease; 34 width: 30px; 35 z-index: 2; 36} 37 38.bauble_box input.bauble_input { 39 opacity: 0; 40 z-index: 0; 41} 42 43/* Checked */ 44.bauble_box input.bauble_input:checked + .bauble_label { 45 background-color: #c22; 46} 47 48.bauble_box input.bauble_input:checked + .bauble_label:before { 49 background-position: 150% 0; 50 box-shadow: inset 0 -5px 25px #500, 0 10px 20px rgba(0,0,0,.4); 51 left: calc( 100% - 35px ); 52} 53
2.9K views
2.9K views
Comments
MIT License