1.radioContainer {
2  display: flex;
3  justify-content: space-between;
4  position: relative;
5  width: 220px;
6}
7
8.radioButton {
9  display: none;
10}
11
12.radioContainer .container {
13  display: inline-flex;
14  justify-content: center;
15  align-items: center;
16  position: relative;
17  transition: 0.8s;
18  cursor: pointer;
19  width: 65px;
20  height: 65px;
21  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
22  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
23  box-shadow: 0 0 5px inset white;
24}
25
26.border {
27  position: absolute;
28  background-color: #212121;
29  width: 100%;
30  height: 100%;
31  transform: scale(0.7) rotate(30deg);
32  transition: 0.3s;
33  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
34}
35
36.border2 {
37  position: absolute;
38  background-color: #212121;
39  width: 100%;
40  height: 100%;
41  transform: scale(0.45);
42  transition: 0.2s;
43  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
44}
45
46.radioContainer input[type="radio"]:checked + .container {
47  filter: hue-rotate(330deg);
48  animation: 2s linear checked;
49}
50
51.radioContainer input[type="radio"]:checked + .container .circle {
52  transform: scale(0.8);
53}
54
55.radioContainer input[type="radio"]:checked + .container .border {
56  animation: 4s linear infinite reverse rotateBorder;
57}
58
59.radioContainer input[type="radio"]:checked + .container .border2 {
60  animation: 2s linear reverse rotateBorder2;
61}
62
63.circle {
64  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
65  border-radius: 100%;
66  width: 22%;
67  height: 22%;
68  transition: 0.25s;
69  z-index: 2;
70  transform: scale(0);
71}
72
73.radioContainer .container:hover .circle {
74  transform: scale(0.8);
75  box-shadow: 0 20px 20px #00c6fb;
76}
77
78@keyframes checked {
79  0% {
80    transform: rotate(0deg) scale(1);
81  }
82
83  50% {
84    transform: rotate(0deg) scale(1.07);
85  }
86
87  100% {
88    transform: rotate(360deg) scale(1);
89  }
90}
91
92@keyframes rotateBorder {
93  0% {
94    transform: scale(0.7) rotate(0deg);
95  }
96
97  50% {
98    transform: scale(0.7) rotate(0deg);
99  }
100
101  100% {
102    transform: scale(0.7)rotate(360deg);
103  }
104}
105
106@keyframes rotateBorder2 {
107  0% {
108    transform: scale(0.51) rotate(30deg);
109  }
110
111  50% {
112    transform: scale(0.51) rotate(0deg);
113  }
114
115  100% {
116    transform: scale(0.51) rotate(360deg);
117  }
118}
119