1.container {
2  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
3  font-style: italic;
4  font-weight: bold;
5  font-size: 1.2em;
6  display: grid;
7  gap: 2em;
8  place-content: center;
9  width: 400px;
10}
11
12.container input[type=radio] {
13  display: none;
14}
15
16.input-btn:is(:checked) + .neon-btn .span {
17  inset: 2px;
18  background-color: #4090b5;
19  background: repeating-linear-gradient(to bottom, transparent 0%, #4090b5 1px, #4090b5 3px, #4090b5 5px, #4090b5 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsl(295, 60%, 12%) 100%);
20  box-shadow: inset 0 40px 20px hsl(296, 59%, 10%);
21}
22
23.input-btn:is(:checked) + .neon-btn .txt {
24  text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
25  color: rgb(255, 255, 255);
26  animation: colorchange 0.3s ease;
27}
28
29.input-btn:is(:checked) + .neon-btn::before {
30  animation-duration: 0.6s;
31}
32
33.input-btn:is(:checked) + .neon-btn::after {
34  animation-duration: 0.6s;
35}
36
37.neon-btn {
38  width: 300px;
39  height: 60px;
40  cursor: pointer;
41  display: flex;
42  justify-content: center;
43  align-items: center;
44  padding: 0.5em 5em;
45  text-align: right;
46  background: transparent;
47  position: relative;
48  overflow: hidden;
49  transition: all 2s ease-in-out;
50  -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
51  clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
52}
53
54.neon-btn .span {
55  display: flex;
56  -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
57  clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
58  position: absolute;
59  inset: 1px;
60  background-color: #212121;
61  z-index: 1;
62}
63
64.neon-btn .txt {
65  text-align: right;
66  position: relative;
67  z-index: 2;
68  color: aliceblue;
69  font-size: 1em;
70  transition: all ease-in-out 2s linear;
71  text-shadow: 0px 0px 1px #4090b5, 0px 0px 1px #9e30a9, 0 0 1px white;
72}
73
74.neon-btn::before {
75  content: "";
76  position: absolute;
77  height: 300px;
78  aspect-ratio: 1.5/1;
79  box-shadow: -17px -19px 20px #9e30a9;
80  background-image: conic-gradient(#9e30a9, transparent, transparent, transparent, transparent, transparent, transparent, #9e30a9);
81  animation: rotate 4s linear infinite -2s;
82}
83
84.neon-btn::after {
85  content: "";
86  position: absolute;
87  height: 300px;
88  aspect-ratio: 1.5/1;
89  box-shadow: -17px -19px 10px #4090b5;
90  background-image: conic-gradient(#4090b5, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #4090b5);
91  animation: rotate 4s linear infinite;
92}
93
94@keyframes rotate {
95  0% {
96    transform: rotate(0deg);
97  }
98
99  to {
100    transform: rotate(360deg);
101  }
102}
103
104@keyframes colorchange {
105  0% {
106    text-shadow: 0px 0px 0px #9e30a9, 0px 0px 0px #4090b5, 0 0 0px rgba(255, 255, 255, 0.616);
107  }
108
109  50% {
110    text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
111  }
112
113  to {
114    text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
115  }
116}
117
118@keyframes backgroundchange {
119  0% {
120    background-color: transparent;
121  }
122
123  50% {
124    background-color: #4090b5;
125  }
126
127  to {
128    background-color: transparent;
129  }
130}