This post is saved as a draft.
#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 position: absolute; 7 opacity: 0; 8 cursor: pointer; 9 height: 0; 10 width: 0; 11} 12 13.container { 14 display: block; 15 position: relative; 16 cursor: pointer; 17 font-size: 20px; 18 user-select: none; 19 border: 3px solid #beddd0; 20 border-radius: 10px; 21 overflow: hidden; 22} 23 24/* Create a custom checkbox */ 25.checkmark { 26 position: relative; 27 top: 0; 28 left: 0; 29 height: 1.3em; 30 width: 1.3em; 31 background-color: #2dc38c; 32 border-bottom: 1.5px solid #2dc38c; /* Bottom stroke */ 33 box-shadow: 0 0 1px #cef1e4, inset 0 -2.5px 3px #62eab8, 34 inset 0 3px 3px rgba(0, 0, 0, 0.34); /* Inner shadow */ 35 border-radius: 8px; 36 transition: transform 0.3s ease-in-out; /* Transition for smooth animation */ 37} 38 39/* When the checkbox is checked, modify the checkmark appearance */ 40.container input:checked ~ .checkmark { 41 transform: translateY(40px); /* Move down */ 42 animation: wipeDown 0.6s ease-in-out forwards; /* Apply wipe animation */ 43} 44 45/* When the checkbox is not checked, modify the checkmark appearance */ 46.container input:not(:checked) ~ .checkmark { 47 transform: translateY(-40px); /* Move up */ 48 animation: wipeUp 0.6s ease-in-out forwards; /* Apply wipe animation */ 49} 50 51/* Keyframes for wipe animations */ 52@keyframes wipeDown { 53 0% { 54 transform: translateY(0); /* Starting position */ 55 } 56 100% { 57 transform: translateY(40px); /* End position */ 58 } 59} 60 61@keyframes wipeUp { 62 0% { 63 transform: translateY(40); /* Starting position */ 64 } 65 100% { 66 transform: translateY(0px); /* End position */ 67 } 68} 69 70/* Create the checkmark/indicator */ 71.checkmark:after { 72 content: ""; 73 position: absolute; 74 display: none; 75} 76 77/* Show the checkmark when checked */ 78.container input:checked ~ .checkmark:after { 79 display: block; 80} 81 82/* Style the checkmark/indicator */ 83.container .checkmark:before { 84 content: ""; 85 position: absolute; 86 left: 10px; 87 top: 4px; 88 width: 5px; 89 height: 10px; 90 border: solid white; 91 border-width: 0 2px 2px 0; 92 transform: rotate(45deg); 93 box-shadow: 0 4px 2px rgba(0, 0, 0, 0.34); /* Icon drop shadow */ 94} 95
Variation of acheckbox
Variation of acheckbox