Switch by barisdogansutcu

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