1.fancy {
2 background-color: transparent;
3 border: 2px solid #000;
4 border-radius: 0;
5 box-sizing: border-box;
6 color: #fff;
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: black;
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: black;
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: #e8e8e8;
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: #e8e8e8;
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: #e8e8e8;
77 transition: width 0.5s ease-out, right 0.3s ease-out;
78}
79
80.fancy:hover {
81 color: white;
82 background: black;
83}
84
85.fancy:hover::before {
86 width: 0.9375rem;
87 background: white;
88}
89
90.fancy:hover .text {
91 color: white;
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}