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