Button by TomMussard

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