1.container input[type="radio"] {
2  position: absolute;
3  opacity: 0;
4  cursor: pointer;
5  height: 0;
6  width: 0;
7}
8
9.container {
10  display: inline-block;
11  position: relative;
12  cursor: pointer;
13  font-size: 17px;
14  width: 5em;
15  height: 2.5em;
16  user-select: none;
17  border: none;
18}
19
20.selected {
21  position: absolute;
22  top: 0;
23  left: 0;
24  width: 100%;
25  height: 100%;
26}
27
28#leftradio {
29  border-bottom-left-radius: 2.5em;
30  border-top-left-radius: 2.5em;
31  border-bottom-right-radius: 0;
32  border-top-right-radius: 0;
33  border: 3px solid #78cce2;
34  background-color: transparent;
35  transition: 0.2s ease-in;
36}
37
38#rightradio {
39  border-bottom-right-radius: 2.5em;
40  border-top-right-radius: 2.5em;
41  border-bottom-left-radius: 0;
42  border-top-left-radius: 0;
43  border: 3px solid #defe47;
44  background-color: transparent;
45  transition: 0.2s linear;
46}
47
48#middleradio {
49  border: 3px solid #f887ff;
50  background-color: transparent;
51  transition: 0.2s linear;
52}
53
54.selected:after {
55  content: '';
56  position: absolute;
57  background-color: 78cce2;
58  width: 100%;
59  height: 90%;
60  transform: scale(0);
61  transition: 0.2s ease-out;
62}
63
64#leftradio:hover {
65  border-bottom-left-radius: 2.5em;
66  border-top-left-radius: 2.5em;
67  border-bottom-right-radius: 0;
68  border-top-right-radius: 0;
69  border: 3px solid #78cce2;
70  background-color: #78cce2;
71}
72
73#leftradio::after {
74  top: 0%;
75  height: 100%;
76  border-bottom-left-radius: 2.5em;
77  border-top-left-radius: 2.5em;
78  border-bottom-right-radius: 0;
79  border-top-right-radius: 0;
80  border: none;
81  background-color: #78cce2;
82  box-shadow: 0em 0em 4em 0.1em #78cce2;
83}
84
85#rightradio:hover {
86  border-bottom-right-radius: 2.5em;
87  border-top-right-radius: 2.5em;
88  border-bottom-left-radius: 0;
89  border-top-left-radius: 0;
90  border: 3px solid #defe47;
91  background-color: #defe47;
92}
93
94#rightradio::after {
95  left: -3%;
96  top: -1%;
97  border-bottom-right-radius: 2.5em;
98  border-top-right-radius: 2.5em;
99  border-bottom-left-radius: 0;
100  border-top-left-radius: 0;
101  border: 3px solid #defe47;
102  background-color: #defe47;
103  box-shadow: 0em 0em 4em 0.1em #defe47;
104}
105
106#middleradio:hover {
107  border: 3px solid #f887ff;
108  background-color: #f887ff;
109}
110
111#middleradio::after {
112  left: -3%;
113  top: -3%;
114  border: 3px solid #f887ff;
115  background-color: #f887ff;
116  box-shadow: 0em 0em 4em 0.1em #f887ff;
117}
118
119.container input[type="radio"]:checked ~ .selected:after {
120  transform: scale(1);
121}
122