Button by kennyotsu-monochromia

1.Btn {
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  display: flex;
10  align-items: center;
11  justify-content: flex-start;
12  width: 45px;
13  height: 45px;
14  border: none;
15  border-radius: 5px;
16  cursor: pointer;
17  position: relative;
18  overflow: hidden;
19  transition-duration: .3s;
20  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
21  background-color: var(--af-white);
22}
23
24/* plus sign */
25.sign {
26  width: 100%;
27  transition-duration: .3s;
28  display: flex;
29  align-items: center;
30  justify-content: center;
31}
32
33.sign svg {
34  width: 17px;
35}
36
37.sign svg path {
38  fill: var(--night-rider);
39}
40/* text */
41.text {
42  position: absolute;
43  right: 0%;
44  width: 0%;
45  opacity: 0;
46  color: var(--night-rider);
47  font-size: 1.2em;
48  font-weight: 600;
49  transition-duration: .3s;
50}
51/* hover effect on button width */
52.Btn:hover {
53  width: 125px;
54  border-radius: 5px;
55  transition-duration: .3s;
56}
57
58.Btn:hover .sign {
59  width: 30%;
60  transition-duration: .3s;
61  padding-left: 20px;
62}
63/* hover effect button's text */
64.Btn:hover .text {
65  opacity: 1;
66  width: 70%;
67  transition-duration: .3s;
68  padding-right: 10px;
69}
70/* button click effect*/
71.Btn:active {
72  transform: translate(2px ,2px);
73}