1.button {
2  position: relative;
3  background-color: transparent;
4  color: #e8e8e8;
5  font-size: 17px;
6  font-weight: 600;
7  border-radius: 10px;
8  width: 150px;
9  height: 60px;
10  border: none;
11  text-transform: uppercase;
12  cursor: pointer;
13  overflow: hidden;
14  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
15  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
16}
17
18.button::before {
19  content: "Hello!";
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  width: 100%;
24  height: 100%;
25  pointer-events: none;
26  background: linear-gradient(135deg,#7b4397,#dc2430 );
27  transform: translate(0%,90%);
28  z-index: 99;
29  position: relative;
30  transform-origin: bottom;
31  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
32}
33
34.button::after {
35  content: "Hover me";
36  display: flex;
37  align-items: center;
38  justify-content: center;
39  background-color: #333;
40  width: 100%;
41  height: 100%;
42  pointer-events: none;
43  transform-origin: top;
44  transform: translate(0%,-100%);
45  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
46}
47
48.button:hover::before {
49  transform: translate(0%,0%);
50}
51
52.button:hover::after {
53  transform: translate(0%,-200%);
54}
55
56.button:focus {
57  outline: none;
58}
59
60.button:active {
61  scale: 0.95;
62}
63
64
65