1button {
2  font-family: 'Poppins', sans-serif;
3  letter-spacing: 2px;
4  background: none;
5  color: white;
6  position: relative;
7  outline: none;
8  border: none;
9  height: 50px;
10  width: 190px;
11  font-size: 14px;
12  z-index: 2;
13  transition: 0.01s 0.23s ease-out all;
14  overflow: hidden;
15}
16
17button:before {
18  content: "";
19  position: absolute;
20  left: 0;
21  top: 0;
22  height: 100%;
23  width: 55%;
24  background: #303030;
25  z-index: -1;
26  transition: 0.3s ease-in all;
27}
28
29button:after {
30  content: "";
31  position: absolute;
32  left: -5%;
33  top: 5%;
34  height: 90%;
35  width: 5%;
36  background: white;
37  transition: 0.4s 0.02s ease-in all;
38}
39
40button:hover {
41  cursor: pointer;
42  color: transparent;
43}
44
45button:hover:before {
46  left: 120%;
47  width: 25%;
48}
49
50button:hover:after {
51  left: 100%;
52  width: 70%;
53}
54
55button:hover > .icon-right.after:after {
56  left: -80px;
57  color: white;
58  transition: 0.2s 0.2s ease all;
59}
60
61button:hover > .icon-right.after:before {
62  left: -104px;
63  top: 14px;
64  opacity: 0.2;
65  color: white;
66}
67
68.icon-right {
69  position: absolute;
70  top: 0;
71  right: 0;
72}
73
74.icon-right:after {
75  font-family: "FontAwesome";
76  content: "→";
77  font-size: 24px;
78  display: inline-block;
79  position: relative;
80  top: 26px;
81  transform: translate3D(0, -55%, 0);
82}
83
84.icon-right.after:after {
85  left: -250px;
86  color: black;
87  transition: 0.15s 0.25s ease left, 0.5s 0.05s ease color;
88}
89
90.icon-right.after:before {
91  content: "Click Me!";
92  position: absolute;
93  left: -230px;
94  top: 14px;
95  opacity: 0;
96  transition: 0.2s ease-in all;
97}
98
99.signature {
100  position: fixed;
101  font-family: sans-serif;
102  font-weight: 100;
103  bottom: 10px;
104  left: 0;
105  letter-spacing: 4px;
106  font-size: 10px;
107  width: 100%;
108  text-align: center;
109  color: white;
110  text-transform: uppercase;
111  text-decoration: none;
112}