Switch by barisdogansutcu

1.container {
2  background-color: rgb(36, 36, 36);
3  display: flex;
4  align-items: center;
5  gap: 14px;
6  padding: 10px 15px 10px 10px;
7  cursor: pointer;
8  user-select: none;
9  border-radius: 10px;
10  box-shadow: rgba(46, 46, 46, 0.2) 0px 8px 24px;
11  color: rgb(255, 255, 255);
12}
13
14#favorite {
15  display: none;
16}
17
18#favorite:checked + .container svg {
19  fill: hsl(0deg 100% 50%);
20  stroke: hsl(0deg 100% 50%);
21  animation: heartButton 1s;
22}
23
24@keyframes heartButton {
25  0% {
26    transform: scale(1);
27  }
28
29  25% {
30    transform: scale(1.3);
31  }
32
33  50% {
34    transform: scale(1);
35  }
36
37  75% {
38    transform: scale(1.3);
39  }
40
41  100% {
42    transform: scale(1);
43  }
44}
45
46#favorite + .container .action {
47  position: relative;
48  overflow: hidden;
49  display: grid;
50}
51
52#favorite + .container .action span {
53  grid-column-start: 1;
54  grid-column-end: 1;
55  grid-row-start: 1;
56  grid-row-end: 1;
57  transition: all 0.5s;
58}
59
60#favorite + .container .action span.option-1 {
61  transform: translate(0px, 0%);
62  opacity: 1;
63}
64
65#favorite:checked + .container .action span.option-1 {
66  transform: translate(0px, -100%);
67  opacity: 0;
68}
69
70#favorite + .container .action span.option-2 {
71  transform: translate(0px, 100%);
72  opacity: 0;
73}
74
75#favorite:checked + .container .action span.option-2 {
76  transform: translate(0px, 0%);
77  opacity: 1;
78}
79