#212121
1/* Customize the label (the checkbox-btn) */ 2.checkbox-btn { 3 display: block; 4 position: relative; 5 padding-left: 30px; 6 margin-bottom: 10px; 7 cursor: pointer; 8 -webkit-user-select: none; 9 -moz-user-select: none; 10 -ms-user-select: none; 11 user-select: none; 12} 13 14/* Hide the browser's default checkbox */ 15.checkbox-btn input { 16 position: absolute; 17 opacity: 0; 18 cursor: pointer; 19 height: 0; 20 width: 0; 21} 22 23.checkbox-btn label { 24 cursor: pointer; 25 font-size: 14px; 26} 27/* Create a custom checkbox */ 28.checkmark { 29 position: absolute; 30 top: 0; 31 left: 0; 32 height: 25px; 33 width: 25px; 34 border: 2.5px solid #ffffff; 35 transition: .2s linear; 36} 37.checkbox-btn input:checked ~ .checkmark { 38 background-color: transparent; 39} 40 41/* Create the checkmark/indicator (hidden when not checked) */ 42.checkmark:after { 43 content: ""; 44 position: absolute; 45 visibility: hidden; 46 opacity: 0; 47 left: 50%; 48 top: 40%; 49 width: 10px; 50 height: 14px; 51 border: 2px solid #0ea021; 52 filter: drop-shadow(0px 0px 10px #0ea021); 53 border-width: 0 2.5px 2.5px 0; 54 transition: .2s linear; 55 transform: translate(-50%, -50%) rotate(-90deg) scale(0.2); 56} 57 58/* Show the checkmark when checked */ 59.checkbox-btn input:checked ~ .checkmark:after { 60 visibility: visible; 61 opacity: 1; 62 transform: translate(-50%, -50%) rotate(0deg) scale(1); 63 animation: pulse 1s ease-in; 64} 65 66.checkbox-btn input:checked ~ .checkmark { 67 transform: rotate(45deg); 68 border: none; 69} 70 71@keyframes pulse { 72 0%, 73 100% { 74 transform: translate(-50%, -50%) rotate(0deg) scale(1); 75 } 76 50% { 77 transform: translate(-50%, -50%) rotate(0deg) scale(1.6); 78 } 79} 80 81
Comments
MIT License