Button by adamgiebl

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