1button {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  padding: 20px 22px 20px 22px;
6  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
7  background-color: #e8e8e8;
8  border-color: #ffe2e2;
9  border-style: solid;
10  border-width: 9px;
11  border-radius: 35px;
12  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
13  border-color 400ms ease-in-out,
14  background-color 400ms ease-in-out;
15  word-spacing: -2px;
16}
17
18@keyframes movingBorders {
19  0% {
20    border-color: #fce4e4;
21  }
22
23  50% {
24    border-color: #ffd8d8;
25  }
26
27  90% {
28    border-color: #fce4e4;
29  }
30}
31
32button:hover {
33  background-color: #eee;
34  transform: scale(105%);
35  animation: movingBorders 3s infinite;
36}
37
38.filled,
39.empty {
40  fill: rgb(255, 110, 110);
41  transition: opacity 100ms ease-in-out;
42}
43
44.filled {
45  position: absolute;
46  opacity: 0;
47}
48
49@keyframes beatingHeart {
50  0% {
51    transform: scale(1);
52  }
53
54  15% {
55    transform: scale(1.15);
56  }
57
58  30% {
59    transform: scale(1);
60  }
61
62  45% {
63    transform: scale(1.15);
64  }
65
66  60% {
67    transform: scale(1);
68  }
69}
70
71button:hover .empty {
72  opacity: 0;
73}
74
75button:hover .filled {
76  opacity: 1;
77  animation: beatingHeart 1.2s infinite;
78}