Button by ercnersoy

1button {
2  padding: 0.5rem 2.5rem 0.5rem 2.5rem;
3  box-shadow: 0px 0px 0px 3px black;
4  border: 0;
5  border-radius: 0.5rem;
6  font-size: 1rem;
7  background-color: #ffc83d;
8  color: black;
9  font-weight: bolder;
10  font-family: Verdana, Geneva, Tahoma, sans-serif;
11  position: relative;
12  transition: all .9s ease-in-out;
13  letter-spacing: 0.1rem;
14  text-transform: uppercase;
15}
16
17button:hover {
18  background-color: #f03a17;
19  color: white;
20}
21
22button::before {
23  content: "😍";
24  position: absolute;
25  left: -0rem;
26  top: 0rem;
27  opacity: 1;
28  font-size: 1.55rem;
29  transition: all .9s ease-in-out;
30  transform: rotate(0deg);
31}
32
33button:hover::before {
34  content: "😘";
35  opacity: 1;
36  visibility: visible;
37  transform: rotate(40deg);
38  font-size: 2.5rem;
39  top: -0.75rem;
40  transition: all .9s ease-in-out;
41  animation: rightRun 2s forwards;
42}
43
44button:active::before {
45  content: "🥰";
46}
47
48@keyframes rightRun {
49  100% {
50    transform: translateX(140px);
51  }
52}