Button by mRcOol7

1.Btn {
2  display: flex;
3  align-items: center;
4  justify-content: flex-start;
5  width: 50px;
6  height: 50px;
7  border: none;
8  border-radius: 50%;
9  cursor: pointer;
10  position: relative;
11  overflow: hidden;
12  transition-duration: 0.4s;
13  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
14  background: linear-gradient(to right, #3498db, #e74c3c);
15}
16
17.sign {
18  width: 100%;
19  transition-duration: 0.4s;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23}
24
25.sign svg {
26  width: 17px;
27}
28
29.sign svg path {
30  fill: white;
31}
32
33.text {
34  position: absolute;
35  right: 0%;
36  width: 0%;
37  opacity: 0;
38  color: #ecf0f1;
39  font-size: 1.2em;
40  font-weight: 600;
41  transition-duration: 0.4s;
42}
43
44.Btn:hover {
45  width: 150px;
46  border-radius: 20px;
47  transition-duration: 0.4s;
48  background: linear-gradient(to right, #3498db, #e74c3c);
49}
50
51.Btn:hover .sign {
52  width: 30%;
53  transition-duration: 0.4s;
54  padding-left: 12px;
55}
56
57.Btn:hover .text {
58  opacity: 1;
59  width: 70%;
60  transition-duration: 0.4s;
61  padding-right: 10px;
62}
63
64.Btn:active {
65  transform: translate(2px, 2px);
66  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
67}
68