1.button {
2  height: 50px;
3  width: 150px;
4  border: none;
5  border-radius: 10px;
6  cursor: pointer;
7  position: relative;
8  overflow: hidden;
9  transition: all 0.5s ease-in-out;
10}
11
12.button:hover {
13  box-shadow: .5px .5px 150px #252525;
14}
15
16.type1::after {
17  content: "Thanks";
18  height: 50px;
19  width: 150px;
20  background-color: #008080;
21  color: #fff;
22  position: absolute;
23  top: 0%;
24  left: 0%;
25  transform: translateY(50px);
26  font-size: 1.2rem;
27  font-weight: 600;
28  display: flex;
29  align-items: center;
30  justify-content: center;
31  transition: all 0.5s ease-in-out;
32}
33
34.type1::before {
35  content: "Hover Me";
36  height: 50px;
37  width: 150px;
38  background-color: #fff;
39  color: #008080;
40  position: absolute;
41  top: 0%;
42  left: 0%;
43  transform: translateY(0px) scale(1.2);
44  font-size: 1.2rem;
45  font-weight: 600;
46  display: flex;
47  align-items: center;
48  justify-content: center;
49  transition: all 0.5s ease-in-out;
50}
51
52.type1:hover::after {
53  transform: translateY(0) scale(1.2);
54}
55
56.type1:hover::before {
57  transform: translateY(-50px) scale(0) rotate(120deg);
58}