2.3K views
CSSAdd prefixes
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}
HTML
1<div class="container"> 2 <input type="checkbox" id="cbx2" style="display: none;"> 3 <label for="cbx2" class="check"> 4 <svg width="18px" height="18px" viewBox="0 0 18 18"> 5 <path d="M 1 9 L 1 9 c 0 -5 3 -8 8 -8 L 9 1 C 14 1 17 5 17 9 L 17 9 c 0 4 -4 8 -8 8 L 9 17 C 5 17 1 14 1 9 L 1 9 Z"></path> 6 <polyline points="1 9 7 14 15 4"></polyline> 7 </svg> 8 </label> 9</div>