This post is saved as a draft.
#e8e8e8
1.checkbox-wrapper-46 input[type="checkbox"] { 2 display: none; 3 visibility: hidden; 4} 5 6.checkbox-wrapper-46 .cbx { 7 margin: auto; 8 -webkit-user-select: none; 9 user-select: none; 10 cursor: pointer; 11} 12.checkbox-wrapper-46 .cbx span { 13 display: inline-block; 14 vertical-align: middle; 15 transform: translate3d(0, 0, 0); 16} 17.checkbox-wrapper-46 .cbx span:first-child { 18 position: relative; 19 width: 18px; 20 height: 18px; 21 border-radius: 3px; 22 transform: scale(1); 23 vertical-align: middle; 24 border: 1px solid #9098a9; 25 transition: all 0.2s ease; 26} 27.checkbox-wrapper-46 .cbx span:first-child svg { 28 position: absolute; 29 top: 3px; 30 left: 2px; 31 fill: none; 32 stroke: #ffffff; 33 stroke-width: 2; 34 stroke-linecap: round; 35 stroke-linejoin: round; 36 stroke-dasharray: 16px; 37 stroke-dashoffset: 16px; 38 transition: all 0.3s ease; 39 transition-delay: 0.1s; 40 transform: translate3d(0, 0, 0); 41} 42.checkbox-wrapper-46 .cbx span:first-child:before { 43 content: ""; 44 width: 100%; 45 height: 100%; 46 background: #506eec; 47 display: block; 48 transform: scale(0); 49 opacity: 1; 50 border-radius: 50%; 51} 52.checkbox-wrapper-46 .cbx span:last-child { 53 padding-left: 8px; 54} 55.checkbox-wrapper-46 .cbx:hover span:first-child { 56 border-color: #506eec; 57} 58 59.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child { 60 background: #506eec; 61 border-color: #506eec; 62 animation: wave-46 0.4s ease; 63} 64.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg { 65 stroke-dashoffset: 0; 66} 67.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before { 68 transform: scale(3.5); 69 opacity: 0; 70 transition: all 0.6s ease; 71} 72 73@keyframes wave-46 { 74 50% { 75 transform: scale(0.9); 76 } 77} 78
Variation of acheckbox
Variation of acheckbox