Button by Dashrath-Sharma

1button {
2  border: none;
3  outline: none;
4  font-size: 17px;
5  padding: 1em 2em;
6  position: relative;
7  color: #14213d;
8  background: #f1f1f1;
9  display: grid;
10  font-weight: 700;
11  place-items: center;
12  transition: color 350ms linear 650ms;
13  border-top-right-radius: 10px;
14  border-bottom-right-radius: 10px;
15  overflow: hidden;
16  z-index: 1;
17}
18
19button:hover {
20  color: #212529;
21}
22
23button::before,
24button::after {
25  content: "";
26  position: absolute;
27  left: 0;
28  top: 0;
29  z-index: -1;
30  width: 0;
31  height: 6%;
32}
33
34button::before {
35  background: #212529;
36  transition: width 350ms, height 350ms linear 650ms;
37}
38
39button:hover::before {
40  width: 100%;
41  height: 100%;
42}
43
44button:after {
45  background: #ced4da;
46  transition: width 350ms linear 175ms, height 350ms linear 650ms;
47}
48
49button:hover::after {
50  width: 95%;
51  height: 100%;
52}
53