1label {
2 background-color: white;
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(149, 157, 165, 0.2) 0px 8px 24px;
11 color: black;
12}
13
14input {
15 display: none;
16}
17
18input:checked + label 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
46input + label .action {
47 position: relative;
48 overflow: hidden;
49 display: grid;
50}
51
52input + label .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 .5s;
58}
59
60input + label .action span.option-1 {
61 transform: translate(0px,0%);
62 opacity: 1;
63}
64
65input:checked + label .action span.option-1 {
66 transform: translate(0px,-100%);
67 opacity: 0;
68}
69
70input + label .action span.option-2 {
71 transform: translate(0px,100%);
72 opacity: 0;
73}
74
75input:checked + label .action span.option-2 {
76 transform: translate(0px,0%);
77 opacity: 1;
78}
79