Checkbox by mrpumps31232
#e8e8e8
1.checkbox { 2 position: relative; 3 display: inline-block; 4 vertical-align: middle; 5 margin-right: 20px; 6} 7 8.checkbox input[type="checkbox"] { 9 position: absolute; 10 opacity: 0; 11} 12 13.checkbox-circle { 14 position: relative; 15 display: inline-block; 16 width: 30px; 17 height: 30px; 18 border-radius: 50%; 19 border: 2px solid #aaa; 20 transition: all 0.3s; 21} 22 23.checkbox input[type="checkbox"]:checked ~ .checkbox-circle { 24 background: #4CAF50; 25 border-color: #4CAF50; 26} 27 28.checkmark { 29 position: absolute; 30 top: 0; 31 left: 0; 32 fill: none; 33 stroke: #fff; 34 stroke-width: 3; 35 stroke-linecap: round; 36 stroke-linejoin: round; 37 opacity: 0; 38 transition: all 0.3s; 39} 40 41.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark { 42 opacity: 1; 43} 44 45.checkmark-circle { 46 stroke-dasharray: 166; 47 stroke-dashoffset: 166; 48 transition: stroke-dashoffset 0.3s; 49} 50 51.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark-circle { 52 stroke-dashoffset: 0; 53} 54 55.checkmark-kick { 56 stroke-dasharray: 50; 57 stroke-dashoffset: 50; 58 transition: stroke-dashoffset 0.3s; 59} 60 61.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark-kick { 62 stroke-dashoffset: 0; 63} 64
919 views
919 views
MIT License