Checkbox by KSAplay
#212121
1.container input { 2 position: absolute; 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 display: block; 11 position: relative; 12 cursor: pointer; 13 font-size: 25px; 14 user-select: none; 15 transition: 100ms; 16} 17 18.checkmark { 19 top: 0; 20 left: 0; 21 height: 2em; 22 width: 2em; 23 transition: 100ms; 24 animation: dislike_401 400ms ease; 25} 26 27.container input:checked ~ .checkmark path { 28 fill: #1C7DFF; 29 stroke-width: 1.2; 30 stroke: #212121; 31 /*same background color*/ 32} 33 34.container input:checked ~ .checkmark { 35 animation: like_401 400ms ease; 36} 37 38.container:hover { 39 transform: scale(1.1); 40} 41 42@keyframes like_401 { 43 0% { 44 transform: scale(0); 45 } 46 47 50% { 48 transform: scale(1.2); 49 } 50 51 100% { 52 transform: scale(1); 53 } 54} 55 56@keyframes dislike_401 { 57 0% { 58 transform: scale(0); 59 } 60 61 50% { 62 transform: scale(1.2); 63 } 64 65 100% { 66 transform: scale(1); 67 } 68}
1.2K views
1.2K views
MIT License