#e8e8e8
1.toggle { 2 display: inline-block; 3} 4 5.toggle { 6 position: relative; 7 height: 100px; 8 width: 100px; 9} 10 11.toggle:before { 12 box-shadow: 0; 13 border-radius: 84.5px; 14 background: #fff; 15 position: absolute; 16 margin-left: -36px; 17 margin-top: -36px; 18 opacity: 0.2; 19 height: 72px; 20 width: 72px; 21 left: 50%; 22 top: 50%; 23} 24 25.toggle .button { 26 transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); 27 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); 28 border-radius: 68.8px; 29 position: absolute; 30 background: #eaeaea; 31 margin-left: -34.4px; 32 margin-top: -34.4px; 33 display: block; 34 height: 68.8px; 35 width: 68.8px; 36 left: 50%; 37 top: 50%; 38} 39 40.toggle .label { 41 transition: color 300ms ease-out; 42 line-height: 101px; 43 text-align: center; 44 position: absolute; 45 font-weight: 700; 46 font-size: 28px; 47 display: block; 48 opacity: 0.9; 49 height: 100%; 50 width: 100%; 51 color: rgba(0, 0, 0, 0.9); 52} 53 54.toggle input { 55 opacity: 0; 56 position: absolute; 57 cursor: pointer; 58 z-index: 1; 59 height: 100%; 60 width: 100%; 61 left: 0; 62 top: 0; 63} 64 65.toggle input:active ~ .button { 66 filter: blur(0.5px); 67 box-shadow: 0 12px 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); 68} 69 70.toggle input:active ~ .label { 71 font-size: 26px; 72 color: rgba(0, 0, 0, 0.45); 73} 74 75.toggle input:checked ~ .button { 76 filter: blur(0.5px); 77 box-shadow: 0 10px 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); 78} 79 80.toggle input:checked ~ .label { 81 color: rgba(0, 0, 0, 0.8); 82} 83
Comments
MIT License