1.Btn {
2  display: flex;
3  align-items: center;
4  justify-content: flex-start;
5  width: 45px;
6  height: 45px;
7  border-radius: calc(45px/2);
8  border: none;
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: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);
15}
16
17/* plus sign */
18.sign {
19  width: 100%;
20  font-size: 2.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.4em;
35  font-weight: 500;
36  transition-duration: .3s;
37}
38/* hover effect on button width */
39.Btn:hover {
40  width: 125px;
41  transition-duration: .3s;
42}
43
44.Btn:hover .sign {
45  width: 30%;
46  transition-duration: .3s;
47  padding-left: 15px;
48}
49/* hover effect button's text */
50.Btn:hover .text {
51  opacity: 1;
52  width: 70%;
53  transition-duration: .3s;
54  padding-right: 15px;
55}
56/* button click effect*/
57.Btn:active {
58  transform: translate(2px ,2px);
59}