<label><input value="on" name="dummy" type="checkbox" class="bubble"></label>
<style>
/* From Uiverse.io by Nawsome - Tags: skeuomorphism, checkbox, squishy, bubble */
label, .bubble {
  display: block;
  -webkit-tap-highlight-color: transparent;
}

label {
  animation: float74 4s ease-in-out infinite;
}

.bubble, .bubble:before, .bubble:after {
  transition-duration: 0.2s;
}

.bubble, .bubble:after {
  border-radius: 50%;
}

.bubble {
  background-image: radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,