#e8e8e8
1.checkbox-wrapper-5 .check { 2 --size: 40px; 3 position: relative; 4 background: linear-gradient(90deg, #f19af3, #f099b5); 5 line-height: 0; 6 perspective: 400px; 7 font-size: var(--size); 8} 9 10.checkbox-wrapper-5 .check input[type="checkbox"], 11 .checkbox-wrapper-5 .check label, 12 .checkbox-wrapper-5 .check label::before, 13 .checkbox-wrapper-5 .check label::after, 14 .checkbox-wrapper-5 .check { 15 appearance: none; 16 display: inline-block; 17 border-radius: var(--size); 18 border: 0; 19 transition: .35s ease-in-out; 20 box-sizing: border-box; 21 cursor: pointer; 22} 23 24.checkbox-wrapper-5 .check label { 25 width: calc(2.2 * var(--size)); 26 height: var(--size); 27 background: #d7d7d7; 28 overflow: hidden; 29} 30 31.checkbox-wrapper-5 .check input[type="checkbox"] { 32 position: absolute; 33 z-index: 1; 34 width: calc(.8 * var(--size)); 35 height: calc(.8 * var(--size)); 36 top: calc(.1 * var(--size)); 37 left: calc(.1 * var(--size)); 38 background: linear-gradient(45deg, #dedede, #ffffff); 39 box-shadow: 0 6px 7px rgba(0,0,0,0.3); 40 outline: none; 41 margin: 0; 42} 43 44.checkbox-wrapper-5 .check input[type="checkbox"]:checked { 45 left: calc(1.3 * var(--size)); 46} 47 48.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label { 49 background: transparent; 50} 51 52.checkbox-wrapper-5 .check label::before, 53 .checkbox-wrapper-5 .check label::after { 54 content: "· ·"; 55 position: absolute; 56 overflow: hidden; 57 left: calc(.15 * var(--size)); 58 top: calc(.5 * var(--size)); 59 height: var(--size); 60 letter-spacing: calc(-0.04 * var(--size)); 61 color: #9b9b9b; 62 font-family: "Times New Roman", serif; 63 z-index: 2; 64 font-size: calc(.6 * var(--size)); 65 border-radius: 0; 66 transform-origin: 0 0 calc(-0.5 * var(--size)); 67 backface-visibility: hidden; 68} 69 70.checkbox-wrapper-5 .check label::after { 71 content: "●"; 72 top: calc(.65 * var(--size)); 73 left: calc(.2 * var(--size)); 74 height: calc(.1 * var(--size)); 75 width: calc(.35 * var(--size)); 76 font-size: calc(.2 * var(--size)); 77 transform-origin: 0 0 calc(-0.4 * var(--size)); 78} 79 80.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::before, 81 .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after { 82 left: calc(1.55 * var(--size)); 83 top: calc(.4 * var(--size)); 84 line-height: calc(.1 * var(--size)); 85 transform: rotateY(360deg); 86} 87 88.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after { 89 height: calc(.16 * var(--size)); 90 top: calc(.55 * var(--size)); 91 left: calc(1.6 * var(--size)); 92 font-size: calc(.6 * var(--size)); 93 line-height: 0; 94} 95
3.9K views
3.9K views
Comments
MIT License