Button by A3zra

1button {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  height: 50px;
6  position: relative;
7  padding: 0 20px;
8  font-size: 18px;
9  text-transform: uppercase;
10  border: 0;
11  background-color: #E15331;
12  border-radius: 12px;
13  overflow: hidden;
14  transition: 31ms cubic-bezier(.5, .7, .4, 1);
15  width: 300px;
16}
17
18button:before {
19  content: attr(alt);
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  position: absolute;
24  inset: 0;
25  font-size: 15px;
26  font-weight: bold;
27  color: white;
28  letter-spacing: 4px;
29  opacity: 1;
30}
31
32button:active {
33  box-shadow: none;
34  transform: translateY(7px);
35  transition: 35ms cubic-bezier(.5, .7, .4, 1);
36}
37
38button:hover:before {
39  transition: all .0s;
40  transform: translateY(100%);
41  opacity: 0;
42  color: #E15331;
43}
44
45button i {
46  color: white;
47  font-size: 15px;
48  font-weight: bold;
49  letter-spacing: 4px;
50  font-style: normal;
51  transition: all 2s ease;
52  transform: translateY(-20px);
53  opacity: 0;
54}
55
56button:hover i {
57  transition: all .2s ease;
58  transform: translateY(0px);
59  opacity: 1;
60}
61
62button:hover i:nth-child(1) {
63  transition-delay: 0.045s;
64}
65
66button:hover i:nth-child(2) {
67  transition-delay: calc(0.045s * 3);
68}
69
70button:hover i:nth-child(3) {
71  transition-delay: calc(0.045s * 4);
72}
73
74button:hover i:nth-child(4) {
75  transition-delay: calc(0.045s * 5);
76}
77
78button:hover i:nth-child(6) {
79  transition-delay: calc(0.045s * 6);
80}
81
82button:hover i:nth-child(7) {
83  transition-delay: calc(0.045s * 7);
84}
85
86button:hover i:nth-child(8) {
87  transition-delay: calc(0.045s * 8);
88}
89
90button:hover i:nth-child(9) {
91  transition-delay: calc(0.045s * 9);
92}
93
94button:hover i:nth-child(10) {
95  transition-delay: calc(0.045s * 10);
96}
97