3K views
CSSAdd prefixes
1.check { 2 cursor: pointer; 3 position: relative; 4 margin: auto; 5 width: 18px; 6 height: 18px; 7 -webkit-tap-highlight-color: transparent; 8 transform: translate3d(0, 0, 0); 9} 10 11.check:before { 12 content: ""; 13 position: absolute; 14 top: -15px; 15 left: -15px; 16 width: 48px; 17 height: 48px; 18 border-radius: 50%; 19 background: rgba(34,50,84,0.03); 20 opacity: 0; 21 transition: opacity 0.2s ease; 22} 23 24.check svg { 25 position: relative; 26 z-index: 1; 27 fill: none; 28 stroke-linecap: round; 29 stroke-linejoin: round; 30 stroke: #c8ccd4; 31 stroke-width: 1.5; 32 transform: translate3d(0, 0, 0); 33 transition: all 0.2s ease; 34} 35 36.check svg path { 37 stroke-dasharray: 60; 38 stroke-dashoffset: 0; 39} 40 41.check svg polyline { 42 stroke-dasharray: 22; 43 stroke-dashoffset: 66; 44} 45 46.check:hover:before { 47 opacity: 1; 48} 49 50.check:hover svg { 51 stroke: #4285f4; 52} 53 54#cbx:checked + .check svg { 55 stroke: #4285f4; 56} 57 58#cbx:checked + .check svg path { 59 stroke-dashoffset: 60; 60 transition: all 0.3s linear; 61} 62 63#cbx:checked + .check svg polyline { 64 stroke-dashoffset: 42; 65 transition: all 0.2s linear; 66 transition-delay: 0.15s; 67} 68
HTML
1<div class="container"> 2 <input type="checkbox" id="cbx" style="display: none;"> 3 <label for="cbx" class="check"> 4 <svg width="18px" height="18px" viewBox="0 0 18 18"> 5 <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path> 6 <polyline points="1 9 7 14 15 4"></polyline> 7 </svg> 8 </label> 9</div>