Button by kennyotsu-monochromia

1.button {
2  --black: #000000;
3  --ch-black: #141414;
4  --eer-black: #1b1b1b;
5  --night-rider: #2e2e2e;
6  --white: #ffffff;
7  --af-white: #f3f3f3;
8  --ch-white: #e1e1e1;
9  position: relative;
10  padding: 24px 64px;
11  border-radius: 5px;
12  color: var(--night-rider);
13  font-weight: 600;
14  font-size: 1rem;
15  letter-spacing: 0px;
16  background-color: var(--white);
17  border: solid 1px var(--ch-white);
18  overflow: hidden;
19  cursor: pointer;
20  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
21  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
22  font-family: Montserrat;
23}
24
25.button .button-text {
26  position: relative;
27  z-index: 2;
28}
29
30.button .fill-container {
31  position: absolute;
32  left: 0;
33  top: 50%;
34  width: 100%;
35  padding-bottom: 100%;
36  transform: translateY(-50%) rotate(180deg);
37}
38
39.button .fill-container::after {
40  content: '';
41  position: absolute;
42  left: 0;
43  top: 0;
44  width: 100%;
45  height: 100%;
46  background-color: var(--af-white);
47  border-radius: 50px;
48  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
49  transform: translateY(-100%);
50}
51
52.button:hover {
53  transform: translateY(-4px);
54  color: var(--black);
55}
56
57.button:hover .fill-container {
58  transform: translateY(-50%) rotate(0);
59}
60
61.button:hover .fill-container::after {
62  transform: translateY(0);
63}