Button by Yatsu68

1button {
2  all: unset;
3  background-color: #1b2164;
4  color: #fff;
5  border-radius: 8px;
6  padding: 1rem;
7  overflow: hidden;
8  display: -webkit-box;
9  display: -ms-flexbox;
10  display: flex;
11  -webkit-box-align: center;
12  -ms-flex-align: center;
13  align-items: center;
14}
15
16button span {
17  letter-spacing: 1.2px;
18  padding-left: 0.8rem;
19  padding-right: 0.6rem;
20  font-weight: 600;
21}
22
23button:hover {
24  background: linear-gradient(-45deg, #1b2164, #6a33a8, #1b2164, #2ba6f5);
25  background-size: 400% 400%;
26  -webkit-transform: scale(1.01);
27  -ms-transform: scale(1.01);
28  transform: scale(1.01);
29  -webkit-animation: scaling-and-gradient 10s ease infinite;
30  animation: scaling-and-gradient 10s ease infinite;
31}
32
33button svg {
34  text-shadow: 0px 7px rgba(81,67,21,0.8), 
35	  -3px 0px 7px rgba(81,67,21,0.8), 
36	  0px 4px 7px rgba(81,67,21,0.8);
37  -webkit-animation: slide-in 1.6s ease-out both;
38  animation: slide-in 1.6s ease-out both;
39}
40
41button:active svg {
42  -webkit-animation: slide-out 0.4s ease-in forwards;
43  animation: slide-out 0.4s ease-in forwards;
44}
45
46@-webkit-keyframes slide-out {
47  0% {
48    -webkit-transform: translateY(0) translateX(0) rotate(-35);
49    transform: translateY(0) translateX(0) rotate(-35);
50    opacity: 1;
51  }
52
53  100% {
54    -webkit-transform: translateY(-300px) translateX(-300px);
55    transform: translateY(-300px) translateX(-300px);
56    opacity: 0;
57  }
58}
59
60@keyframes slide-out {
61  0% {
62    -webkit-transform: translateY(0) translateX(0) rotate(-35);
63    transform: translateY(0) translateX(0) rotate(-35);
64    opacity: 1;
65  }
66
67  100% {
68    -webkit-transform: translateY(-300px) translateX(-300px);
69    transform: translateY(-300px) translateX(-300px);
70    opacity: 0;
71  }
72}
73
74@-webkit-keyframes slide-in {
75  0% {
76    -webkit-transform: translateY(300px) translateX(300px);
77    transform: translateY(300px) translateX(300px);
78    opacity: 0;
79  }
80
81  100% {
82    -webkit-transform: translateY(0) translateX(0) rotate(-35);
83    transform: translateY(0) translateX(0) rotate(-35);
84    opacity: 1;
85  }
86}
87
88@keyframes slide-in {
89  0% {
90    -webkit-transform: translateY(300px) translateX(300px);
91    transform: translateY(300px) translateX(300px);
92    opacity: 0;
93  }
94
95  100% {
96    -webkit-transform: translateY(0) translateX(0) rotate(-35);
97    transform: translateY(0) translateX(0) rotate(-35);
98    opacity: 1;
99  }
100}
101
102@-webkit-keyframes scaling-and-gradient {
103  0% {
104    background-position: 0% 50%;
105    scale: 1;
106  }
107
108  25% {
109    scale: 1.04;
110  }
111
112  50% {
113    background-position: 100% 50%;
114    scale: 1.06;
115  }
116
117  50% {
118    scale: 1.04;
119  }
120
121  100% {
122    background-position: 0% 50%;
123    scale: 1;
124  }
125}
126
127@keyframes scaling-and-gradient {
128  0% {
129    background-position: 0% 50%;
130    scale: 1;
131  }
132
133  25% {
134    scale: 1.04;
135  }
136
137  50% {
138    background-position: 100% 50%;
139    scale: 1.06;
140  }
141
142  50% {
143    scale: 1.04;
144  }
145
146  100% {
147    background-position: 0% 50%;
148    scale: 1;
149  }
150}