Checkbox by csemszepp
#212121
1:root { 2 --bubbleTiming: cubic-bezier(0.5,0.15,0.25,1.75); 3 font-size: calc(40px + (60 - 40) * (100% - 320px) / (1280 - 320)); 4} 5 6label, .bubble { 7 display: block; 8 -webkit-tap-highlight-color: transparent; 9} 10 11label { 12 animation: float 4s ease-in-out infinite; 13} 14 15.bubble, .bubble:before, .bubble:after { 16 transition-duration: 0.2s; 17} 18 19.bubble, .bubble:after { 20 border-radius: 50%; 21} 22 23.bubble { 24 background-image: radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 25 radial-gradient(8% 8% at 23% 27%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 26 radial-gradient(8% 8% at 24% 26%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 27 radial-gradient(8% 8% at 25% 25%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 28 radial-gradient(8% 8% at 26% 24%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 29 radial-gradient(8% 8% at 27% 23%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 30 radial-gradient(8% 8% at 28% 22%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%); 31 box-shadow: 0 -0.06em 0.1em hsl(0,90%,100%) inset, 32 0 -0.15em 0.4em hsl(0,90%,45%) inset, 33 0 0.05em 0.05em hsl(0,90%,45%) inset, 34 0.05em 0 0.1em hsl(0,90%,100%) inset, 35 -0.05em 0 0.1em hsl(0,90%,100%) inset, 36 0 0.1em 0.4em hsl(0,90%,60%) inset; 37 cursor: pointer; 38 position: relative; 39 width: 3em; 40 height: 3em; 41 transform-style: preserve-3d; 42 transition-property: box-shadow, transform, width, height; 43 transition-timing-function: ease-in-out, ease-in-out, var(--bubbleTiming), var(--bubbleTiming); 44 will-change: transform; 45 -webkit-appearance: none; 46 appearance: none; 47 z-index: 0; 48} 49 50.bubble:before, .bubble:after { 51 content: ""; 52 display: block; 53 position: absolute; 54 transition-timing-function: var(--bubbleTiming); 55} 56 57.bubble:before { 58 border-radius: 0.75em; 59 box-shadow: 0 0 0 0.5em hsl(0,0%,100%) inset; 60 filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2)); 61 top: 50%; 62 left: 50%; 63 width: 1.5em; 64 height: 1.5em; 65 transform: translate3d(-50%,-50%,-1px); 66 z-index: -1; 67} 68 69.bubble:after { 70 background: radial-gradient(100% 100% at center,hsla(0,0%,0%,0) 35%,hsla(0,0%,0%,0.2) 48%,hsla(0,0%,0%,0) 50%); 71 filter: blur(4px); 72 top: 0.6em; 73 left: 0.6em; 74 width: 100%; 75 height: 100%; 76 transform: translate3d(0,0,-1px); 77 z-index: -2; 78} 79 80.bubble:focus, .bubble:hover { 81 transform: scale(1.1); 82 outline: none; 83} 84 85.bubble:focus:active, .bubble:hover:active { 86 width: 3.6em; 87 height: 2.4em; 88} 89 90.bubble:focus:before, .bubble:hover:before { 91 filter: drop-shadow(0.75em 0.75em 4px hsla(0,0%,0%,0.2)); 92} 93 94.bubble:focus:after, .bubble:hover:after { 95 transform: translate3d(0.15em,0.15em,-1px); 96} 97 98.bubble:checked { 99 box-shadow: 0 -0.06em 0.1em hsl(120,90%,100%) inset, 100 0 -0.15em 0.4em hsl(120,90%,45%) inset, 101 0 0.05em 0.05em hsl(120,90%,45%) inset, 102 0.05em 0 0.1em hsl(120,90%,100%) inset, 103 -0.05em 0 0.1em hsl(120,90%,100%) inset, 104 0 0.1em 0.4em hsl(120,90%,60%) inset; 105} 106 107.bubble:checked:before { 108 border-radius: 0.25em; 109 width: 0.5em; 110} 111/* Reduced motion */ 112@media (prefers-reduced-motion: reduce) { 113 label { 114 animation: none; 115 } 116 117 .bubble, .bubble:before, .bubble:after { 118 transition-duration: 0s; 119 } 120 121 .bubble:focus, .bubble:hover { 122 transform: scale(1); 123 } 124 125 .bubble:focus:active, .bubble:hover:active { 126 width: 3em; 127 height: 3em; 128 } 129 130 .bubble:focus:before, .bubble:hover:before { 131 filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2)); 132 } 133 134 .bubble:focus:after, .bubble:hover:after { 135 transform: translate3d(0,0,-1px); 136 } 137} 138/* Animations */ 139@keyframes float { 140 from, to { 141 transform: translate(0,3%); 142 } 143 144 25% { 145 transform: translate(-3%,0); 146 } 147 148 50% { 149 transform: translate(0,-3%); 150 } 151 152 75% { 153 transform: translate(3%,0); 154 } 155}
588 views
588 views
MIT License