1.download-button {
2 position: relative;
3 border-width: 0;
4 color: white;
5 font-size: 15px;
6 font-weight: 600;
7 border-radius: 4px;
8 z-index: 1;
9}
10
11.download-button .docs {
12 display: flex;
13 align-items: center;
14 justify-content: space-between;
15 gap: 10px;
16 min-height: 40px;
17 padding: 0 10px;
18 border-radius: 4px;
19 z-index: 1;
20 background-color: #242a35;
21 border: solid 1px #e8e8e82d;
22 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
23}
24
25.download-button:hover {
26 box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
27}
28
29.download {
30 position: absolute;
31 inset: 0;
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 max-width: 90%;
36 margin: 0 auto;
37 z-index: -1;
38 border-radius: 4px;
39 transform: translateY(0%);
40 background-color: #01e056;
41 border: solid 1px #01e0572d;
42 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
43}
44
45.download-button:hover .download {
46 transform: translateY(100%)
47}
48
49.download svg polyline,.download svg line {
50 animation: docs 1s infinite;
51}
52
53@keyframes docs {
54 0% {
55  transform: translateY(0%);
56 }
57
58 50% {
59  transform: translateY(-15%);
60 }
61
62 100% {
63  transform: translateY(0%);
64 }
65}