Checkbox by UmangLadha
#e8e8e8
1.checkbox-wrapper .cbx { 2 -webkit-user-select: none; 3 user-select: none; 4 -webkit-tap-highlight-color: transparent; 5 cursor: pointer; 6} 7.checkbox-wrapper .cbx span { 8 display: inline-block; 9 vertical-align: middle; 10 transform: translate3d(0, 0, 0); 11} 12.checkbox-wrapper .cbx span:first-child { 13 position: relative; 14 width: 24px; 15 height: 24px; 16 border-radius: 50%; 17 transform: scale(1); 18 vertical-align: middle; 19 border: 1px solid #b9b8c3; 20 transition: all 0.2s ease; 21} 22.checkbox-wrapper .cbx span:first-child svg { 23 position: absolute; 24 z-index: 1; 25 top: 8px; 26 left: 6px; 27 fill: none; 28 stroke: white; 29 stroke-width: 2; 30 stroke-linecap: round; 31 stroke-linejoin: round; 32 stroke-dasharray: 16px; 33 stroke-dashoffset: 16px; 34 transition: all 0.3s ease; 35 transition-delay: 0.1s; 36 transform: translate3d(0, 0, 0); 37} 38.checkbox-wrapper .cbx span:first-child:before { 39 content: ""; 40 width: 100%; 41 height: 100%; 42 background: #506eec; 43 display: block; 44 transform: scale(0); 45 opacity: 1; 46 border-radius: 50%; 47 transition-delay: 0.2s; 48} 49.checkbox-wrapper .cbx span:last-child { 50 margin-left: 8px; 51} 52.checkbox-wrapper .cbx span:last-child:after { 53 content: ""; 54 position: absolute; 55 top: 8px; 56 left: 0; 57 height: 1px; 58 width: 100%; 59 background: #b9b8c3; 60 transform-origin: 0 0; 61 transform: scaleX(0); 62} 63.checkbox-wrapper .cbx:hover span:first-child { 64 border-color: #3c53c7; 65} 66 67.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child { 68 border-color: #3c53c7; 69 background: #3c53c7; 70 animation: check-15 0.6s ease; 71} 72.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child svg { 73 stroke-dashoffset: 0; 74} 75.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child:before { 76 transform: scale(2.2); 77 opacity: 0; 78 transition: all 0.6s ease; 79} 80.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child { 81 color: #b9b8c3; 82 transition: all 0.3s ease; 83} 84.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child:after { 85 transform: scaleX(1); 86 transition: all 0.3s ease; 87} 88 89@keyframes check-15 { 90 50% { 91 transform: scale(1.2); 92 } 93} 94
284 views
284 views
MIT License