1button {
2  padding: 20px 60px;
3  background-color: #000;
4  border: none;
5  font-size: 18px;
6  position: relative;
7  /* overflow: hidden; */
8  transition: 500ms;
9}
10
11button span {
12  color: gray;
13  position: relative;
14  transition: 500ms;
15  transition-delay: 500ms;
16  font-size: 16px;
17  text-transform: uppercase;
18  letter-spacing: 2px;
19  font-weight: 600;
20}
21
22button:before {
23  content: '';
24  position: absolute;
25  width: 0%;
26  height: 0%;
27  left: 50%;
28  right: 50%;
29  top: 50%;
30  bottom: 50%;
31  transition: 500ms;
32  transition-delay: 500ms;
33  background-color: red;
34  box-shadow: 0 0 10px red,
35   0 0 30px red, 
36   0 0 50px red;
37}
38
39button div {
40  transition: 500ms;
41  position: absolute;
42  background-color: red;
43  box-shadow: 0 0 15px red, 0 0 30px red, 0 0 50px red;
44}
45
46button .top {
47  width: 15px;
48  height: 2px;
49  top: 0;
50  left: 0;
51}
52
53button .bottom {
54  width: 15px;
55  height: 2px;
56  bottom: 0;
57  right: 0;
58}
59
60button .left {
61  width: 2px;
62  height: 15px;
63  top: 0;
64  left: 0;
65}
66
67button .right {
68  width: 2px;
69  height: 15px;
70  bottom: 0;
71  right: 0;
72}
73
74button:hover {
75  color: #000;
76}
77
78button:hover span {
79  color: #000;
80}
81
82button:hover:before {
83  width: 100%;
84  height: 100%;
85  top: 0;
86  left: 0;
87  right: 0;
88  bottom: 0;
89}
90
91button:hover .top, 
92button:hover .bottom {
93  width: 100%;
94}
95
96button:hover .left,
97button:hover .right {
98  height: 100%;
99}