1button {
2  text-transform: uppercase;
3  letter-spacing: 0.1em;
4  padding: 10px 30px;
5  transition: 0.5s;
6  position: relative;
7  font-size: 17px;
8  background: #333;
9  border: none;
10  color: #fff;
11}
12
13button:hover {
14  letter-spacing: 0.25em;
15  background: #ff1867;
16  color: #ff1867;
17  box-shadow: 0 0 45px #ff1867;
18}
19
20button::before {
21  content: '';
22  position: absolute;
23  inset: 2px;
24  background: #222222;
25}
26
27button span {
28  position: relative;
29  z-index: 1;
30}
31
32button i {
33  position: absolute;
34  inset: 0;
35  display: block;
36}
37
38button i::before {
39  content: '';
40  position: absolute;
41  border: 2px solid #ff1867;
42  width: 7px;
43  height: 4px;
44  top: -3.5px;
45  left: 80%;
46  background: #222222;
47  transform: translateX(-50%);
48  transition: 0.5s;
49}
50
51button:hover i::before {
52  width: 20px;
53  left: 20%;
54}
55
56button i::after {
57  content: '';
58  position: absolute;
59  border: 2px solid #ff1867;
60  width: 7px;
61  height: 4px;
62  bottom: -3.5px;
63  left: 20%;
64  background: #222222;
65  transform: translateX(-50%);
66  transition: 0.5s;
67}
68
69button:hover i::after {
70  width: 20px;
71  left: 80%;
72}