Button by anushkaps

1.button {
2  cursor: pointer;
3  height: 6em;
4  width: 18em;
5  border-radius: 1em;
6  border-top: 0.2em solid #b0b1b0;
7  border-bottom: 0.2em solid #50504f;
8  border-left: 0.2em solid #848584;
9  border-right: 0.2em solid #848584;
10  box-shadow: 0.3em 0.3em 0.5em #a9aaa9;
11  background: linear-gradient(to bottom, #fbfcfb, #ecedec);
12  display: flex;
13  justify-content: center;
14  align-items: center;
15  position: relative;
16  overflow: hidden;
17}
18
19.button::before {
20  content: "";
21  position: absolute;
22  top: 0;
23  left: 0;
24  right: 0;
25  bottom: 0;
26  border-radius: inherit;
27  padding: 0.2em;
28  background: linear-gradient(135deg, #b0b1b0, #848584, #50504f);
29  z-index: -1;
30}
31
32.in {
33  display: flex;
34  justify-content: space-around;
35  align-items: center;
36  height: 4.8em;
37  width: 16.9em;
38  border-radius: 2em;
39  background: linear-gradient(to bottom, #eceeec, #ffffff);
40  transition: background 2s, transform 2s ease;
41}
42
43.text {
44  font-size: 21px;
45  font-weight: bold;
46  width: 9em;
47  color: #252625;
48  transition: transform 0.6s ease-in-out;
49}
50
51.image {
52  padding-left: 1.2em;
53  transition: transform 0.3s ease-in-out;
54}
55
56.image svg {
57  transition: transform 0.6s ease-in-out; /* Smooth rotation */
58}
59
60.button:hover .in {
61  background: linear-gradient(to bottom, #ffffff, #eceeec);
62  transform: scale(1.05);
63}
64
65.button:hover .image {
66  animation: fly-1 0.6s ease-in-out infinite alternate;
67}
68
69.button:hover svg {
70  transform: translateX(6.5em) rotate(2deg);
71}
72
73.button:hover .text {
74  transform: translateX(9em);
75}
76
77.button:active {
78  transform: scale(0.95);
79}
80
81@keyframes fly-1 {
82  from {
83    transform: translateY(0.1em);
84  }
85  to {
86    transform: translateY(-0.1em);
87  }
88}
89