Checkbox by OptX71285225
#212121
1/* Hide the default checkbox */ 2.checkbox-container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6} 7 8/* Create a custom checkbox container */ 9.checkbox-container { 10 position: relative; 11 display: inline-block; 12 font-size: 18px; /* Make the checkbox slightly bigger */ 13 margin-bottom: 12px; 14 cursor: pointer; 15} 16 17/* Style the checkmark */ 18.checkmark { 19 position: absolute; 20 top: 0; 21 left: 0; 22 height: 30px; /* Make the checkbox slightly bigger */ 23 width: 30px; /* Make the checkbox slightly bigger */ 24 border: 2px solid #ccc; /* Add border for 3D effect */ 25 border-radius: 6px; /* Round the corners */ 26 background-color: #fff; /* Default color */ 27 transition: all 0.3s ease; /* Add smooth transition */ 28} 29 30/* Show the checkmark when checkbox is checked */ 31.checkbox-container input:checked ~ .checkmark:after { 32 display: block; 33 animation: checkboxExpand 0.3s ease forwards; 34} 35 36/* Style the checkmark/indicator */ 37.checkmark:after { 38 content: ""; 39 position: absolute; 40 display: none; 41 top: 50%; /* Center vertically */ 42 left: 50%; /* Center horizontally */ 43 transform: translate(-50%, -50%) rotate(45deg) scale(0); /* Center and hide initially, then scale to appear */ 44 width: 8px; /* Adjust size */ 45 height: 15px; /* Adjust size */ 46 border: solid #fff; /* Change color of the tick to white */ 47 border-width: 0 4px 4px 0; /* Adjust thickness and direction */ 48} 49 50/* On hover, add a grey background color */ 51.checkbox-container:hover .checkmark { 52 background-color: #ccc; 53 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add subtle shadow */ 54 transform: scale(1.05); /* Scale up slightly */ 55} 56 57/* When the checkbox is checked, add a green background */ 58.checkbox-container input:checked ~ .checkmark { 59 background-color: #4caf50; 60 border-color: #4caf50; /* Change border color */ 61 box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Add shadow for 3D effect */ 62} 63 64/* Keyframes for expanding animation */ 65@keyframes checkboxExpand { 66 0% { 67 transform: translate(-50%, -50%) rotate(45deg) scale(0); 68 } 69 100% { 70 transform: translate(-50%, -50%) rotate(45deg) scale(1); 71 } 72} 73
290 views
290 views
Variations
2218 views
MIT License