1.crushbtn {
2  font-size: 2rem;
3  padding: 0.7rem 2.4rem;
4  letter-spacing: .3rem;
5  border-radius: 1.5rem;
6  position: relative;
7  background-color: #e8e8e8;
8  color: red;
9  border: none;
10  text-shadow: 0 0 3px #ff6e6e;
11  overflow: hidden;
12  cursor: pointer;
13  transition: 0.7s;
14  z-index: 2;
15}
16
17.heart1 svg {
18  position: absolute;
19  left: 4.5rem;
20  top: 1.8rem;
21  opacity: 0;
22  fill: red;
23  stroke: none;
24  transition: 0.7s;
25  width: 2rem;
26  height: 2rem;
27  animation: move1 5s ease-in-out infinite alternate-reverse;
28}
29
30.heart2 svg {
31  position: absolute;
32  left: 0.8rem;
33  opacity: 0;
34  top: 0.3rem;
35  width: 1.5rem;
36  height: 1.5rem;
37  fill: red;
38  stroke: none;
39  transform: rotate(-20deg );
40  animation: move2 5s ease infinite alternate-reverse;
41}
42
43.heart3 svg {
44  position: absolute;
45  right: 1rem;
46  top: 0.5rem;
47  opacity: 0;
48  width: 1.4rem;
49  height: 1.4rem;
50  transform: rotate(20deg);
51  fill: red;
52  stroke: none;
53  z-index: -1;
54  animation: move3 5s ease infinite alternate-reverse;
55}
56
57@keyframes move1 {
58  0% {
59    top: 2rem;
60  }
61
62  50% {
63    top: 4rem;
64  }
65
66  100% {
67    top: 2rem;
68  }
69}
70
71@keyframes move2 {
72  0% {
73    top: 0.3rem;
74  }
75
76  50% {
77    top: 1.5rem;
78  }
79
80  100% {
81    top: 0.3rem;
82  }
83}
84
85@keyframes move3 {
86  0% {
87    top: 1.5rem;
88  }
89
90  50% {
91    top: .6rem;
92  }
93
94  100% {
95    top: 1.5rem;
96  }
97}
98
99.crushbtn:hover .heart1 svg,
100.crushbtn:hover .heart2 svg,
101.crushbtn:hover .heart3 svg {
102  opacity: 1;
103  filter: drop-shadow(0 0 10px #ff6e6e)
104}
105
106.crushbtn:hover {
107  color: red;
108  box-shadow: 0 0 10px inset #ff6e6e;
109  scale: 105%;
110}
111
112.crushbtn:active {
113  scale: 100%;
114}