Radio by SanjanaSogimatt

1.radio-input {
2  box-shadow: -10px -15px 15px rgba(255, 255, 255, 0.5),
3    10px 10px 25px rgba(70, 70, 70, 0.5);
4  margin: auto;
5  height: 80px;
6  width: 300px;
7  display: flex;
8  align-items: center;
9  justify-content: space-around;
10  position: absolute;
11  border-radius: 50px;
12  top: 0;
13  left: 0;
14  right: 0;
15  bottom: 0;
16  background-color: white;
17}
18
19.radio-input input[type="radio"] {
20  display: none;
21}
22
23.label {
24  font-size: .9rem;
25  font-weight: 600;
26  font-family: 'poppins',sans-serif;
27  padding: 18px 15px;
28  border-radius: 35px;
29  transition: 0.5s;
30  cursor: pointer;
31  color: black;
32}
33
34.radio-input input[type="radio"]:checked + label {
35  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.151),
36    10px 10px 15px rgba(0, 0, 0, 0.218);
37  background: linear-gradient(45deg,#cf6efb,#4f29cd);
38  color: white;
39  transform: translateY(-4px);
40}
41
42.radio-input input[type="radio"]:hover:not(:checked)+ label {
43  box-shadow: inset 10px 10px 15px rgba(0, 0, 0, 0.151),
44    inset 10px 10px 15px rgba(0, 0, 0, 0.218);
45}
46