button download css codepen

1<style>
2.buttonYN {
3  margin: 10em auto 0;
4  display: inline-block;
5  font-size: 1.15em;
6  position: relative;
7  text-align: center;
8  padding: 0.5em 1em;
9  background: linear-gradient(45deg, #59adeb, #40c3af);
10  color: #fff;
11  box-shadow: 0 0.2em 0.2em rgba(0,0,0,0.25);
12  border-radius: 0.2em;
13  transition: box-shadow 0.2s ease-in-out;
14  cursor: pointer;
15}
16.buttonYN:active {
17  background-color: #ccc;
18  box-shadow: 0 0 6px rgba(0,121,238,0.6);
19  transition: box-shadow 0.1s ease-in-out;
20}
21.buttonYN:after {
22  content: "\0021e7";
23  position: absolute;
24  top: -0.4em;
25  left: 0;
26  right: 0;
27  display: block;
28  transform: rotate(180deg);
29  font-size: 5em;
30  opacity: 0;
31  text-shadow: 0 0 1em #000;
32  transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out, top 0.3s ease-in-out;
33  box-sizing: border-box;
34  text-align: center;
35  color: #fff;
36}
37.buttonYN:active:after {
38  font-size: 1em;
39  opacity: 1;
40  transition: none;
41  top: 0.3em;
42}
43.buttonYN:hover {
44  box-shadow: 0 0.1em 0.25em rgba(0,0,0,0.25);
45}
46</style>
47
48<div style='margin: 0; padding: 0; text-align: center; font-family: sans-serif;'>
49  <div class="buttonYN">Download</div>
50  </div>
51