1 
 2<div class="love">
 3  <input id="switch" type="checkbox">
 4  <label class="love-heart" for="switch">
 5    <i class="left"></i>
 6    <i class="right"></i>
 7    <i class="bottom"></i>
 8    <div class="round"></div>
 9  </label>
10</div>          

  1 
  2.love-heart:before,#switch {
  3 display: none;
  4}
  5 
  6.love-heart, .love-heart::after {
  7 border-color: hsl(231deg 28% 86%);
  8 border: 1px solid;
  9 border-top-left-radius: 100px;
 10 border-top-right-radius: 100px;
 11 width: 10px;
 12 height: 8px;
 13 border-bottom: 0
 14}
 15 
 16.round {
 17 position: absolute;
 18 z-index: 1;
 19 width: 8px;
 20 height: 8px;
 21 background: hsl(0deg 0% 100%);
 22 box-shadow: rgb(0 0 0 / 24%) 0px 0px 4px 0px;
 23 border-radius: 100%;
 24 left: 0px;
 25 bottom: -1px;
 26 transition: all .5s ease;
 27 animation: check-animation2 .5s forwards;
 28}
 29 
 30input:checked + label .round {
 31 transform: translate(0px, 0px);
 32 animation: check-animation .5s forwards;
 33 background-color: hsl(0deg 0% 100%);
 34}
 35 
 36@keyframes check-animation {
 37 0% {
 38  transform: translate(0px, 0px);
 39 }
 40 
 41 50% {
 42  transform: translate(0px, 7px);
 43 }
 44 
 45 100% {
 46  transform: translate(7px, 7px);
 47 }
 48}
 49 
 50@keyframes check-animation2 {
 51 0% {
 52  transform: translate(7px, 7px);
 53 }
 54 
 55 50% {
 56  transform: translate(0px, 7px);
 57 }
 58 
 59 100% {
 60  transform: translate(0px, 0px);
 61 }
 62}
 63 
 64.love-heart {
 65 box-sizing: border-box;
 66 position: relative;
 67 transform: rotate(-45deg) translate(-50%, -33px) scale(4);
 68 display: block;
 69 border-color: hsl(231deg 28% 86%);
 70 cursor: pointer;
 71 top: 0;
 72}
 73 
 74input:checked + .love-heart, input:checked + .love-heart::after, input:checked + .love-heart .bottom {
 75 border-color: hsl(347deg 81% 61%);
 76 box-shadow: inset 6px -5px 0px 2px hsl(347deg 99% 72%);
 77}
 78 
 79.love-heart::after, .love-heart .bottom {
 80 content: "";
 81 display: block;
 82 box-sizing: border-box;
 83 position: absolute;
 84 border-color: hsl(231deg 28% 86%);
 85}
 86 
 87.love-heart::after {
 88 right: -9px;
 89 transform: rotate(90deg);
 90 top: 7px;
 91}
 92 
 93.love-heart .bottom {
 94 width: 11px;
 95 height: 11px;
 96 border-left: 1px solid;
 97 border-bottom: 1px solid;
 98 border-color: hsl(231deg 28% 86%);
 99 left: -1px;
100 top: 5px;
101 border-radius: 0px 0px 0px 5px;
102}