Button by d3uceY

1.download-btn {
2  height: 45px;
3  width: 95px;
4  cursor: pointer;
5  background: white;
6  border: none;
7  background: #ff0021;
8  border-radius: 30px;
9  overflow: hidden;
10}
11
12.button-content {
13  transform: translateY(-45px);
14  transition: all 250ms ease-in-out;
15}
16
17.svg-container,
18.text-container {
19  height: 45px;
20  width: 100%;
21  display: flex;
22  justify-content: center;
23  align-items: center;
24}
25
26.text-container .text {
27  font-size: 13px;
28  color: #fff;
29  font-weight: 600;
30  opacity: 1;
31  transition: opacity ease-in-out 250ms;
32}
33
34.download-icon {
35  height: 25px;
36  width: 25px;
37  fill: #fff;
38  opacity: 0;
39  transition: opacity ease-in-out 250ms;
40}
41
42/* hover state for the button */
43.download-btn:hover .button-content {
44  transform: translateY(0px);
45}
46
47.download-btn:hover .text {
48  opacity: 0;
49}
50
51.download-btn:hover .download-icon {
52  opacity: 1;
53}
54
55.download-btn:focus .download-icon {
56  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
57  animation: heartbeat 1.5s ease-in-out infinite both;
58}
59
60@-webkit-keyframes heartbeat {
61  from {
62    -webkit-transform: scale(1);
63    transform: scale(1);
64    -webkit-transform-origin: center center;
65    transform-origin: center center;
66    -webkit-animation-timing-function: ease-out;
67    animation-timing-function: ease-out;
68  }
69  10% {
70    -webkit-transform: scale(0.91);
71    transform: scale(0.91);
72    -webkit-animation-timing-function: ease-in;
73    animation-timing-function: ease-in;
74  }
75  17% {
76    -webkit-transform: scale(0.98);
77    transform: scale(0.98);
78    -webkit-animation-timing-function: ease-out;
79    animation-timing-function: ease-out;
80  }
81  33% {
82    -webkit-transform: scale(0.87);
83    transform: scale(0.87);
84    -webkit-animation-timing-function: ease-in;
85    animation-timing-function: ease-in;
86  }
87  45% {
88    -webkit-transform: scale(1);
89    transform: scale(1);
90    -webkit-animation-timing-function: ease-out;
91    animation-timing-function: ease-out;
92  }
93}
94@keyframes heartbeat {
95  from {
96    -webkit-transform: scale(1);
97    transform: scale(1);
98    -webkit-transform-origin: center center;
99    transform-origin: center center;
100    -webkit-animation-timing-function: ease-out;
101    animation-timing-function: ease-out;
102  }
103  10% {
104    -webkit-transform: scale(0.91);
105    transform: scale(0.91);
106    -webkit-animation-timing-function: ease-in;
107    animation-timing-function: ease-in;
108  }
109  17% {
110    -webkit-transform: scale(0.98);
111    transform: scale(0.98);
112    -webkit-animation-timing-function: ease-out;
113    animation-timing-function: ease-out;
114  }
115  33% {
116    -webkit-transform: scale(0.87);
117    transform: scale(0.87);
118    -webkit-animation-timing-function: ease-in;
119    animation-timing-function: ease-in;
120  }
121  45% {
122    -webkit-transform: scale(1);
123    transform: scale(1);
124    -webkit-animation-timing-function: ease-out;
125    animation-timing-function: ease-out;
126  }
127}
128
129/* hover state for the button */
130