Button by eleventhday

1.fancy {
2  background-color: transparent;
3  border: 2px solid #fff;
4  border-radius: 0;
5  box-sizing: border-box;
6  color: #000;
7  cursor: pointer;
8  display: inline-block;
9  float: right;
10  font-weight: 700;
11  letter-spacing: 0.05em;
12  margin: 0;
13  outline: none;
14  overflow: visible;
15  padding: 1.25em 2em;
16  position: relative;
17  text-align: center;
18  text-decoration: none;
19  text-transform: none;
20  transition: all 0.3s ease-in-out;
21  user-select: none;
22  font-size: 13px;
23}
24
25.fancy::before {
26  content: " ";
27  width: 1.5625rem;
28  height: 2px;
29  background: white;
30  top: 50%;
31  left: 1.5em;
32  position: absolute;
33  transform: translateY(-50%);
34  transform-origin: center;
35  transition: background 0.3s linear, width 0.3s linear;
36}
37
38.fancy .text {
39  font-size: 1.125em;
40  line-height: 1.33333em;
41  padding-left: 2em;
42  display: block;
43  text-align: left;
44  transition: all 0.3s ease-in-out;
45  text-transform: uppercase;
46  text-decoration: none;
47  color: white;
48}
49
50.fancy .top-key {
51  height: 2px;
52  width: 1.5625rem;
53  top: -2px;
54  left: 0.625rem;
55  position: absolute;
56  background: #212121;
57  transition: width 0.5s ease-out, left 0.3s ease-out;
58}
59
60.fancy .bottom-key-1 {
61  height: 2px;
62  width: 1.5625rem;
63  right: 1.875rem;
64  bottom: -2px;
65  position: absolute;
66  background: #212121;
67  transition: width 0.5s ease-out, right 0.3s ease-out;
68}
69
70.fancy .bottom-key-2 {
71  height: 2px;
72  width: 0.625rem;
73  right: 0.625rem;
74  bottom: -2px;
75  position: absolute;
76  background: #212121;
77  transition: width 0.5s ease-out, right 0.3s ease-out;
78}
79
80.fancy:hover {
81  color: white;
82  background: white;
83}
84
85.fancy:hover::before {
86  width: 0.9375rem;
87  background: black;
88}
89
90.fancy:hover .text {
91  color: black;
92  padding-left: 1.5em;
93}
94
95.fancy:hover .top-key {
96  left: -2px;
97  width: 0px;
98}
99
100.fancy:hover .bottom-key-1,
101 .fancy:hover .bottom-key-2 {
102  right: 0;
103  width: 0;
104}