1.radio-input {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5}
6
7.radio-input input {
8  display: none;
9}
10
11.radio-input input + label {
12  position: relative;
13  height: 40px;
14  width: 40px;
15  display: flex;
16  align-items: center;
17  justify-content: center;
18  font-size: 20px;
19  line-height: 1;
20  font-weight: 600;
21  text-shadow: 0 1px #bbb,
22                0 2px #bbb,
23                0 3px #bbb;
24  color: #fff;
25  text-align: center;
26  text-transform: uppercase;
27  cursor: pointer;
28  background-color: #444;
29  border-radius: 30px;
30  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
31  padding: 4px;
32  transition: background-color 0.3s ease, transform 0.3s ease;
33}
34
35.radio-input label:hover {
36  background-color: #FBB03B;
37}
38
39.radio-input input + label::before {
40  content: "";
41  position: absolute;
42  top: -5px;
43  left: -5px;
44  right: -5px;
45  bottom: -5px;
46  background-color: transparent;
47  border: 2px solid #fff;
48  border-bottom: 2px dashed #fff;
49  border-radius: 30px;
50  transition: border-color 0.3s ease;
51}
52
53.radio-input input:checked + label {
54  background-color: #D4145A;
55  background-image: linear-gradient(to top left, #D4145A, #FBB03B);
56  color: #000;
57  transform: scale(1.2);
58  z-index: 1;
59}
60
61.radio-input input:checked + label::before {
62  border-color: #D4145A;
63  transform: rotate(90deg);
64  transition: transform .15s ease;
65  animation: pulse-border 1s ease infinite alternate-reverse;
66}
67
68@keyframes pulse-border {
69  0% {
70    border-color: #D4145A;
71  }
72
73  50% {
74    border-color: #D4145A;
75  }
76
77  100% {
78    transform: scale(1.08);
79    border-color: #D4145A;
80  }
81}
82
83