Checkbox by mobinkakei
#e8e8e8
1.checkmark { 2 display: block; 3 width: 30px; 4 height: 30px; 5 background-color: #ddd; 6 border-radius: 10px; 7 position: relative; 8 transition: background-color 0.4s; 9 overflow: hidden; 10 cursor: pointer; 11} 12 13#check:checked ~ .checkmark { 14 background-color: #08bb68; 15} 16 17.checkmark::after { 18 content: ""; 19 position: absolute; 20 width: 5px; 21 height: 10px; 22 border-right: 3px solid #fff; 23 border-bottom: 3px solid #fff; 24 top: 44%; 25 left: 50%; 26 transform: translate(-50%, -50%) rotateZ(40deg) scale(10); 27 opacity: 0; 28 transition: all 0.4s; 29} 30 31#check:checked ~ .checkmark::after { 32 opacity: 1; 33 transform: translate(-50%, -50%) rotateZ(40deg) scale(1); 34}
3K views
3K views
MIT License