1.form {
2  --background: #ffffff;
3  --text: #414856;
4  --radio: #7C96B2;
5  --radio-checked: #4F29F0;
6  --radio-size: 20px;
7  --width: 150px;
8  --height: 140px;
9  --border-radius: 10px;
10  background: var(--background);
11  width: var(--width);
12  height: var(--height);
13  border-radius: var(--border-radius);
14  color: var(--text);
15  position: relative;
16  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
17  padding: 30px 20px;
18  display: grid;
19  grid-template-columns: auto var(--radio-size);
20  align-items: center;
21}
22
23.form label {
24  cursor: pointer;
25}
26
27.form input[type="radio"] {
28  -webkit-appearance: none;
29  -moz-appearance: none;
30  position: relative;
31  height: var(--radio-size);
32  width: var(--radio-size);
33  outline: none;
34  margin: 0;
35  cursor: pointer;
36  border: 2px solid var(--radio);
37  background: transparent;
38  border-radius: 50%;
39  display: grid;
40  justify-self: end;
41  justify-items: center;
42  align-items: center;
43  overflow: hidden;
44  transition: border .5s ease;
45}
46
47.form input[type="radio"]::before, .form input[type="radio"]::after {
48  content: "";
49  display: flex;
50  justify-self: center;
51  border-radius: 50%;
52}
53
54.form input[type="radio"]::before {
55  position: absolute;
56  width: 100%;
57  height: 100%;
58  background: var(--background);
59  z-index: 1;
60  opacity: var(--opacity, 1);
61}
62
63.form input[type="radio"]::after {
64  position: relative;
65  width: calc(100% /2);
66  height: calc(100% /2);
67  background: var(--radio-checked);
68  top: var(--y, 100%);
69  transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
70}
71
72.form input[type="radio"]:checked {
73  --radio: var(--radio-checked);
74}
75
76.form input[type="radio"]:checked::after {
77  --y: 0%;
78  animation: stretch-animate .3s ease-out .17s;
79}
80
81.form input[type="radio"]:checked::before {
82  --opacity: 0;
83}
84
85.form input[type="radio"]:checked ~ input[type="radio"]::after {
86  --y: -100%;
87}
88
89.form input[type="radio"]:not(:checked)::before {
90  --opacity: 1;
91  transition: opacity 0s linear .5s;
92}
93
94@keyframes stretch-animate {
95  0% {
96    transform: scale(1, 1);
97  }
98
99  28% {
100    transform: scale(1.15, 0.85);
101  }
102
103  50% {
104    transform: scale(0.9, 1.1);
105  }
106
107  100% {
108    transform: scale(1, 1);
109  }
110}
111
112.socials {
113  position: fixed;
114  display: block;
115  left: 20px;
116  bottom: 20px;
117}
118
119.socials > a {
120  display: block;
121  width: 30px;
122  opacity: .2;
123  transform: scale(var(--scale, 0.8));
124  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
125}
126
127.socials > a:hover {
128  --scale: 1;
129}
130