Button by gharsh11032000

1.button {
2  position: relative;
3  overflow: hidden;
4  height: 3rem;
5  padding: 0 2rem;
6  border-radius: 1.5rem;
7  background: transparent;
8  background-size: 400%;
9  color: #fff;
10  border: none;
11  cursor: pointer;
12  transition: all 0.2s cubic-bezier(0.23, 1, 0.320, 1);
13}
14
15.button:hover::before {
16  transform: scaleY(1);
17}
18
19.button-content {
20  position: relative;
21  z-index: 1;
22}
23
24.button::before {
25  content: '';
26  position: absolute;
27  top: 0;
28  left: 0;
29  transform: scaleY(0);
30  transform-origin: bottom;
31  width: 100%;
32  height: inherit;
33  border-radius: inherit;
34  background: linear-gradient(
35    82.3deg,
36    rgba(150, 93, 233, 1) 10.8%,
37    rgba(99, 88, 238, 1) 94.3%
38  );
39  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
40}
41
42.button:active {
43  scale: 0.9;
44}