1.buttonDownload {
2 display: inline-block;
3 position: relative;
4 padding: 10px 25px;
5 background-color: #4CC713;
6 color: white;
7 font-family: sans-serif;
8 text-decoration: none;
9 font-size: 0.9em;
10 text-align: center;
11 text-indent: 15px;
12 border: none;
13}
14
15.buttonDownload:hover {
16 background-color: #45a21a;
17 color: white;
18}
19
20.buttonDownload:before, .buttonDownload:after {
21 content: ' ';
22 display: block;
23 position: absolute;
24 left: 15px;
25 top: 52%;
26}
27
28.buttonDownload:before {
29 width: 10px;
30 height: 2px;
31 border-style: solid;
32 border-width: 0 2px 2px;
33}
34
35.buttonDownload:after {
36 width: 0;
37 height: 0;
38 margin-left: 3px;
39 margin-top: -7px;
40 border-style: solid;
41 border-width: 4px 4px 0 4px;
42 border-color: transparent;
43 border-top-color: inherit;
44 animation: downloadArrow 1s linear infinite;
45 animation-play-state: paused;
46}
47
48.buttonDownload:hover:before {
49 border-color: #cdefbd;
50}
51
52.buttonDownload:hover:after {
53 border-top-color: #cdefbd;
54 animation-play-state: running;
55}
56
57@keyframes downloadArrow {
58 0% {
59  margin-top: -7px;
60  opacity: 1;
61 }
62
63 0.001% {
64  margin-top: -15px;
65  opacity: 0.4;
66 }
67
68 50% {
69  opacity: 1;
70 }
71
72 100% {
73  margin-top: 0;
74  opacity: 0.4;
75 }
76}