1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7.label {
8  position: relative;
9  margin: 0 10px;
10  cursor: pointer;
11}
12
13.button {
14  position: relative;
15  display: flex;
16  justify-content: center;
17  align-items: center;
18  width: 40px;
19  height: 40px;
20  border-radius: 50%;
21  background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
22  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
23  transition: all 0.3s ease;
24}
25
26.button::before,
27.button::after {
28  content: "";
29  position: absolute;
30  width: 100%;
31  height: 100%;
32  border-radius: 50%;
33  transition: all 0.3s ease;
34}
35
36.button::before {
37  background-color: rgba(255, 255, 255, 0.15);
38  transform: scale(0.9);
39  opacity: 0;
40}
41
42.button::after {
43  background-color: rgba(0, 0, 0, 0.1);
44  transform: scale(1.1);
45  opacity: 0;
46}
47
48.label input {
49  display: none;
50}
51
52.label input:checked + .button {
53  background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);
54  box-shadow: 0 10px 20px rgba(255, 87, 34, 0.4);
55}
56
57.label input:checked + .button::before {
58  transform: scale(1.2);
59  opacity: 1;
60}
61
62.label input:checked + .button::after {
63  animation: pulse 1.5s infinite;
64}
65
66@keyframes pulse {
67  0% {
68    transform: scale(1.1);
69    opacity: 1;
70  }
71
72  50% {
73    transform: scale(1.5);
74    opacity: 0;
75  }
76
77  100% {
78    transform: scale(1.1);
79    opacity: 1;
80  }
81}
82
83.shadow {
84  position: absolute;
85  bottom: 5px;
86  width: 100%;
87  height: 10px;
88  border-radius: 50%;
89  background-color: rgba(0, 0, 0, 0.2);
90}
91
92.front {
93  position: relative;
94  z-index: 1;
95}
96