1.btn {
2  --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);
3  --border-width: .125em;
4  --curve-size: .5em;
5  --blur: 30px;
6  --bg: #080312;
7  --color: #afffff;
8  color: var(--color);
9    /* use position: relative; so that BG is only for .btn */
10  position: relative;
11  isolation: isolate;
12  display: inline-grid;
13  place-content: center;
14  padding: .5em 1.5em;
15  font-size: 17px;
16  border: 0;
17  text-transform: uppercase;
18  box-shadow: 10px 10px 20px rgba(0, 0, 0, .6);
19  clip-path: polygon(
20            /* Top-left */
21            0% var(--curve-size),
22
23            var(--curve-size) 0,
24            /* top-right */
25            100% 0,
26            100% calc(100% - var(--curve-size)),
27
28            /* bottom-right 1 */
29            calc(100% - var(--curve-size)) 100%,
30            /* bottom-right 2 */
31            0 100%);
32  transition: color 250ms;
33}
34
35.btn::after,
36.btn::before {
37  content: '';
38  position: absolute;
39  inset: 0;
40}
41
42.btn::before {
43  background: var(--border-color);
44  background-size: 300% 300%;
45  animation: move-bg7234 5s ease infinite;
46  z-index: -2;
47}
48
49@keyframes move-bg7234 {
50  0% {
51    background-position: 31% 0%
52  }
53
54  50% {
55    background-position: 70% 100%
56  }
57
58  100% {
59    background-position: 31% 0%
60  }
61}
62
63.btn::after {
64  background: var(--bg);
65  z-index: -1;
66  clip-path: polygon(
67            /* Top-left */
68            var(--border-width) 
69            calc(var(--curve-size) + var(--border-width) * .5),
70
71            calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),
72
73            /* top-right */
74            calc(100% - var(--border-width)) 
75            var(--border-width),
76
77            calc(100% - var(--border-width)) 
78            calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),
79
80            /* bottom-right 1 */
81            calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),
82            /* bottom-right 2 */
83            var(--border-width) calc(100% - var(--border-width)));
84  transition: clip-path 500ms;
85}
86
87.btn:where(:hover, :focus)::after {
88  clip-path: polygon(
89                /* Top-left */
90                calc(100% - var(--border-width)) 
91
92                calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
93    
94                calc(100% - var(--border-width))
95
96                var(--border-width),
97    
98                /* top-right */
99                calc(100% - var(--border-width))
100
101                 var(--border-width),
102    
103                calc(100% - var(--border-width)) 
104
105                calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),
106    
107                /* bottom-right 1 */
108                calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) 
109                calc(100% - var(--border-width)),
110
111                /* bottom-right 2 */
112                calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
113                calc(100% - var(--border-width)));
114  transition: 200ms;
115}
116
117.btn:where(:hover, :focus) {
118  color: #fff;
119}