#e8e8e8
1.checker { 2 display: block; 3 font-size: 25px; 4 height: 1em; 5 width: 2.5em; 6 box-sizing: content-box; 7 padding: 0.15em; 8 border-radius: 0.25em; 9 cursor: pointer; 10} 11 12.checkmark { 13 width: 1em; 14 height: 1em; 15 transform: translateX(-0.4em); 16 z-index: 5; 17} 18 19.checkmark svg { 20 display: block; 21 background: #e5e5e5; 22 transform: translateX(0.4em); 23 border-radius: 0.15em; 24 transition: background-color var(--duration) ease, transform calc(var(--duration) * 1.5) ease; 25} 26 27.checkmark svg path { 28 stroke-dasharray: 90 90; 29 stroke-dashoffset: 90; 30 transition: stroke-dashoffset calc(var(--duration) / 3) linear calc(var(--duration) / 3); 31} 32 33.checkbox { 34 position: absolute; 35 top: 0; 36 left: 0; 37 opacity: 0.4; 38 visibility: hidden; 39} 40 41.checkbox:checked ~ .checkmark { 42 transform: translate(1.9em); 43} 44 45.checkbox:checked ~ .checkmark svg { 46 background: #77c44c; 47 transform: translate(-0.4em); 48} 49 50.checkbox:checked ~ .checkmark svg path { 51 stroke-dashoffset: 0; 52} 53 54.check-bg { 55 position: absolute; 56 top: 0; 57 left: 0; 58 width: 100%; 59 height: 100%; 60 border-radius: inherit; 61 background: white; 62 z-index: 2; 63} 64 65.check-bg:before, .check-bg:after { 66 content: ""; 67 position: absolute; 68 top: 0; 69 left: 0; 70 height: 100%; 71 width: 100%; 72 border-radius: inherit; 73} 74 75.check-bg:after { 76 background: white; 77} 78 79.check-bg:before { 80 transform: translateY(30%); 81 transform-origin: bottom center; 82 background: black; 83 filter: blur(0.25em); 84 opacity: 0.2; 85 z-index: -1; 86} 87 88.checker.checker:active { 89 transform: scale(0.85); 90 transition-duration: calc(var(--duration) / 2); 91} 92 93.checker.checker:active .check-bg::before { 94 transform: translateY(0) scale(0.8); 95 opacity: 0.2; 96} 97 98*, 99*::before, 100*::after { 101 box-sizing: border-box; 102 position: relative; 103} 104 105html { 106 height: 100%; 107} 108 109body { 110 background-color: #f2f2f2; 111 height: 100%; 112 width: 100%; 113 display: flex; 114 justify-content: center; 115 align-items: center; 116}
4.6K views
4.6K views
Comments
MIT License