Button by zanina-yassine

1.button {
2  min-width: 120px;
3
4  position: relative;
5  cursor: pointer;
6
7  padding: 12px 17px;
8  border: 0;
9  border-radius: 7px;
10
11  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
12  background: radial-gradient(
13    ellipse at bottom,
14    rgba(71, 81, 92, 1) 0%,
15    rgba(11, 21, 30, 1) 45%
16  );
17
18  color: rgb(255, 255, 255, 0.66);
19
20  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
21}
22
23.button::before {
24  content: "";
25  width: 70%;
26  height: 1px;
27
28  position: absolute;
29  bottom: 0;
30  left: 15%;
31
32  background: rgb(255, 255, 255);
33  background: linear-gradient(
34    90deg,
35    rgba(255, 255, 255, 0) 0%,
36    rgba(255, 255, 255, 1) 50%,
37    rgba(255, 255, 255, 0) 100%
38  );
39  opacity: 0.2;
40
41  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
42}
43
44.button:hover {
45  color: rgb(255, 255, 255, 1);
46  transform: scale(1.1) translateY(-3px);
47}
48
49.button:hover::before {
50  opacity: 1;
51}
52