1button {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  padding: 20px 25px 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  font-size: 25px;
13  font-weight: 900;
14  color: rgb(134, 124, 124);
15  font-family: monospace;
16  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
17  border-color 400ms ease-in-out,
18  background-color 400ms ease-in-out;
19  word-spacing: -2px;
20}
21
22@keyframes movingBorders {
23  0% {
24    border-color: #fce4e4;
25  }
26
27  50% {
28    border-color: #ffd8d8;
29  }
30
31  90% {
32    border-color: #fce4e4;
33  }
34}
35
36button:hover {
37  background-color: #eee;
38  transform: scale(105%);
39  animation: movingBorders 3s infinite;
40}
41
42button svg {
43  margin-right: 11px;
44  fill: rgb(255, 110, 110);
45  transition: opacity 100ms ease-in-out;
46}
47
48.filled {
49  position: absolute;
50  opacity: 0;
51  top: 20px;
52  left: 22px;
53}
54
55@keyframes beatingHeart {
56  0% {
57    transform: scale(1);
58  }
59
60  15% {
61    transform: scale(1.15);
62  }
63
64  30% {
65    transform: scale(1);
66  }
67
68  45% {
69    transform: scale(1.15);
70  }
71
72  60% {
73    transform: scale(1);
74  }
75}
76
77button:hover .empty {
78  opacity: 0;
79}
80
81button:hover .filled {
82  opacity: 1;
83  animation: beatingHeart 1.2s infinite;
84}