1button {
2 position: relative;
3 padding: 1em 1.8em;
4 outline: none;
5 border: 1px solid #303030;
6 background: #212121;
7 color: #ae00ff;
8 text-transform: uppercase;
9 letter-spacing: 2px;
10 font-size: 15px;
11 overflow: hidden;
12 transition: 0.2s;
13 border-radius: 20px;
14 cursor: pointer;
15 font-weight: bold;
16}
17
18button:hover {
19 box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff;
20 transition-delay: 0.6s;
21}
22
23button span {
24 position: absolute;
25}
26
27button span:nth-child(1) {
28 top: 0;
29 left: -100%;
30 width: 100%;
31 height: 2px;
32 background: linear-gradient(90deg, transparent, #ae00ff);
33}
34
35button:hover span:nth-child(1) {
36 left: 100%;
37 transition: 0.7s;
38}
39
40button span:nth-child(3) {
41 bottom: 0;
42 right: -100%;
43 width: 100%;
44 height: 2px;
45 background: linear-gradient(90deg, transparent, #001eff);
46}
47
48button:hover span:nth-child(3) {
49 right: 100%;
50 transition: 0.7s;
51 transition-delay: 0.35s;
52}
53
54button span:nth-child(2) {
55 top: -100%;
56 right: 0;
57 width: 2px;
58 height: 100%;
59 background: linear-gradient(180deg, transparent, #ae00ff);
60}
61
62button:hover span:nth-child(2) {
63 top: 100%;
64 transition: 0.7s;
65 transition-delay: 0.17s;
66}
67
68button span:nth-child(4) {
69 bottom: -100%;
70 left: 0;
71 width: 2px;
72 height: 100%;
73 background: linear-gradient(360deg, transparent, #001eff);
74}
75
76button:hover span:nth-child(4) {
77 bottom: 100%;
78 transition: 0.7s;
79 transition-delay: 0.52s;
80}
81
82button:active {
83 background: #ae00af;
84 background: linear-gradient(to top right, #ae00af, #001eff);
85 color: #bfbfbf;
86 box-shadow: 0 0 8px #ae00ff, 0 0 8px #001eff, 0 0 8px #ae00ff;
87 transition: 0.1s;
88}
89
90button:active span:nth-child(1) 
91span:nth-child(2) 
92span:nth-child(2) 
93span:nth-child(2) {
94 transition: none;
95 transition-delay: none;
96}
97