Button by gharsh11032000

1.cssbuttons-io-button {
2  background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
3  color: white;
4  font-family: inherit;
5  padding: 0.35em;
6  padding-left: 1.2em;
7  font-size: 17px;
8  border-radius: 10em;
9  border: none;
10  letter-spacing: 0.05em;
11  display: flex;
12  align-items: center;
13  overflow: hidden;
14  position: relative;
15  height: 2.8em;
16  padding-right: 3.3em;
17  cursor: pointer;
18  text-transform: uppercase;
19  font-weight: 500;
20  box-shadow: 0 0 1.6em rgba(183, 33, 255,0.3),0 0 1.6em hsla(191, 98%, 56%, 0.3);
21  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
22}
23
24.cssbuttons-io-button .icon {
25  background: white;
26  margin-left: 1em;
27  position: absolute;
28  display: flex;
29  align-items: center;
30  justify-content: center;
31  height: 2.2em;
32  width: 2.2em;
33  border-radius: 10em;
34  right: 0.3em;
35  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
36}
37
38.cssbuttons-io-button:hover .icon {
39  width: calc(100% - 0.6em);
40}
41
42.cssbuttons-io-button .icon svg {
43  width: 1.1em;
44  transition: transform 0.3s;
45  color: #B721FF;
46}
47
48.cssbuttons-io-button:hover .icon svg {
49  transform: translateX(0.1em);
50}
51
52.cssbuttons-io-button:active .icon {
53  transform: scale(0.9);
54}
55