Checkbox by EddyBel
#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6 height: 0; 7 width: 0; 8} 9 10.container { 11 display: block; 12 position: relative; 13 cursor: pointer; 14 font-size: 20px; 15 user-select: none; 16} 17 18.container::before { 19 position: absolute; 20 left: 0; 21 top: 0; 22 content: ""; 23 width: 100%; 24 height: 100%; 25 border-radius: 50%; 26 filter: blur(5px); 27 background-color: #b899ff; 28 background-image: radial-gradient(at 6% 13%, hsla(322,81%,60%,1) 0px, transparent 50%), 29radial-gradient(at 9% 59%, hsla(209,65%,71%,1) 0px, transparent 50%), 30radial-gradient(at 39% 16%, hsla(325,93%,79%,1) 0px, transparent 50%); 31} 32 33/* Create a custom checkbox */ 34.checkmark { 35 position: relative; 36 top: 0; 37 left: 0; 38 height: 2em; 39 width: 2em; 40 border-radius: 50%; 41 background-color: rgb(255, 255, 255); 42} 43 44/* When the checkbox is checked, add a blue background */ 45.container input:checked ~ .checkmark { 46 height: 2em; 47 width: 2em; 48 border-radius: 50%; 49 position: relative; 50} 51 52.container input:checked ~ .checkmark::before { 53 position: absolute; 54 left: 0; 55 top: 0; 56 right: 0; 57 bottom: 0; 58 margin: auto; 59 width: 65%; 60 height: 65%; 61 content: ""; 62 border-radius: 50%; 63 background-color: #ff99f0; 64 background-image: radial-gradient(at 86% 29%, hsla(277,65%,76%,1) 0px, transparent 50%), 65 radial-gradient(at 13% 20%, hsla(54,73%,71%,1) 0px, transparent 50%), 66 radial-gradient(at 76% 0%, hsla(145,64%,69%,1) 0px, transparent 50%); 67 animation: animation__checked 600ms normal; 68} 69 70@keyframes animation__checked { 71 0% { 72 opacity: 0; 73 transform: scale(0.8); 74 } 75 76 100% { 77 opacity: 100; 78 transform: scale(1); 79 } 80}
825 views
825 views
MIT License