974 views
CSSAdd prefixes
1.container input { 2 position: absolute; 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 display: block; 11 position: relative; 12 cursor: pointer; 13 font-size: 20px; 14 user-select: none; 15 transition: 100ms; 16} 17 18.checkmark { 19 top: 0; 20 left: 0; 21 height: 2em; 22 width: 2em; 23 transition: 100ms; 24 animation: dislike_effect 400ms ease; 25} 26 27.container input:checked ~ .checkmark path { 28 fill: #FF5353; 29 stroke-width: 0; 30} 31 32.container input:checked ~ .checkmark { 33 animation: like_effect 400ms ease; 34} 35 36.container:hover { 37 transform: scale(1.1); 38} 39 40@keyframes like_effect { 41 0% { 42 transform: scale(0); 43 } 44 45 50% { 46 transform: scale(1.2); 47 } 48 49 100% { 50 transform: scale(1); 51 } 52} 53 54@keyframes dislike_effect { 55 0% { 56 transform: scale(0); 57 } 58 59 50% { 60 transform: scale(1.2); 61 } 62 63 100% { 64 transform: scale(1); 65 } 66}
HTML
1<label class="container"> 2 <input checked="checked" type="checkbox"> 3 <div class="checkmark"> 4 <svg viewBox="0 0 256 256"> 5 <rect fill="none" height="256" width="256"></rect> 6 <path d="M224.6,51.9a59.5,59.5,0,0,0-43-19.9,60.5,60.5,0,0,0-44,17.6L128,59.1l-7.5-7.4C97.2,28.3,59.2,26.3,35.9,47.4a59.9,59.9,0,0,0-2.3,87l83.1,83.1a15.9,15.9,0,0,0,22.6,0l81-81C243.7,113.2,245.6,75.2,224.6,51.9Z" stroke-width="20px" stroke="#FFF" fill="none"></path></svg> 7 </div> 8</label>