#212121
1/* Variation of work by @mrhyddenn for Radios */ 2 3 4.check { 5 cursor: pointer; 6 position: relative; 7 margin: auto; 8 width: 18px; 9 height: 18px; 10 -webkit-tap-highlight-color: transparent; 11 transform: translate3d(0, 0, 0); 12} 13 14.check:before { 15 content: ""; 16 position: absolute; 17 top: -15px; 18 left: -15px; 19 width: 48px; 20 height: 48px; 21 border-radius: 50%; 22 background: rgba(34, 50, 84, 0.03); 23 opacity: 0; 24 transition: opacity 0.2s ease; 25} 26 27.check svg { 28 position: relative; 29 z-index: 1; 30 fill: none; 31 stroke-linecap: round; 32 stroke-linejoin: round; 33 stroke: #c8ccd4; 34 stroke-width: 1.5; 35 transform: translate3d(0, 0, 0); 36 transition: all 0.2s ease; 37} 38 39.check svg path { 40 stroke-dasharray: 60; 41 stroke-dashoffset: 0; 42} 43 44.check svg polyline { 45 stroke-dasharray: 22; 46 stroke-dashoffset: 66; 47} 48 49.check:hover:before { 50 opacity: 1; 51} 52 53.check:hover svg { 54 stroke: var(--accent-color, #a3e583); 55} 56 57#cbx2:checked + .check svg { 58 stroke: var(--accent-color, #a3e583); 59} 60 61#cbx2:checked + .check svg path { 62 stroke-dashoffset: 60; 63 transition: all 0.3s linear; 64} 65 66#cbx2:checked + .check svg polyline { 67 stroke-dashoffset: 42; 68 transition: all 0.2s linear; 69 transition-delay: 0.15s; 70}
Comments
MIT License