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 box-shadow: hsl(210deg 87% 36%) 0px 7px 0px 0px;
12 background-color: hsl(210deg 100% 44%);
13 border-radius: 12px;
14 overflow: hidden;
15 transition: 31ms cubic-bezier(.5, .7, .4, 1);
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}
43
44button i {
45 color: white;
46 font-size: 15px;
47 font-weight: bold;
48 letter-spacing: 4px;
49 font-style: normal;
50 transition: all 2s ease;
51 transform: translateY(-20px);
52 opacity: 0;
53}
54
55button:hover i {
56 transition: all .2s ease;
57 transform: translateY(0px);
58 opacity: 1;
59}
60
61button:hover i:nth-child(1) {
62 transition-delay: 0.045s;
63}
64
65button:hover i:nth-child(2) {
66 transition-delay: calc(0.045s * 3);
67}
68
69button:hover i:nth-child(3) {
70 transition-delay: calc(0.045s * 4);
71}
72
73button:hover i:nth-child(4) {
74 transition-delay: calc(0.045s * 5);
75}
76
77button:hover i:nth-child(6) {
78 transition-delay: calc(0.045s * 6);
79}
80
81button:hover i:nth-child(7) {
82 transition-delay: calc(0.045s * 7);
83}
84
85button:hover i:nth-child(8) {
86 transition-delay: calc(0.045s * 8);
87}
88
89button:hover i:nth-child(9) {
90 transition-delay: calc(0.045s * 9);
91}
92
93button:hover i:nth-child(10) {
94 transition-delay: calc(0.045s * 10);
95}