Button by vinodjangid07

1.Btn {
2  display: flex;
3  align-items: center;
4  justify-content: flex-start;
5  width: 45px;
6  height: 45px;
7  border: none;
8  border-radius: 0px;
9  cursor: pointer;
10  position: relative;
11  overflow: hidden;
12  transition-duration: .3s;
13  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
14  background-color: black;
15}
16
17/* plus sign */
18.sign {
19  width: 100%;
20  font-size: 2em;
21  color: white;
22  transition-duration: .3s;
23  display: flex;
24  align-items: center;
25  justify-content: center;
26}
27/* text */
28.text {
29  position: absolute;
30  right: 0%;
31  width: 0%;
32  opacity: 0;
33  color: white;
34  font-size: 1.2em;
35  font-weight: 500;
36  transition-duration: .3s;
37}
38/* hover effect on button width */
39.Btn:hover {
40  width: 125px;
41  border-radius: 0px;
42  transition-duration: .3s;
43}
44
45.Btn:hover .sign {
46  width: 30%;
47  transition-duration: .3s;
48  padding-left: 20px;
49}
50/* hover effect button's text */
51.Btn:hover .text {
52  opacity: 1;
53  width: 70%;
54  transition-duration: .3s;
55  padding-right: 20px;
56}
57/* button click effect*/
58.Btn:active {
59  transform: translate(2px ,2px);
60}