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}
20
21.cssbuttons-io-button .icon {
22  background: white;
23  margin-left: 1em;
24  position: absolute;
25  display: flex;
26  align-items: center;
27  justify-content: center;
28  height: 2.2em;
29  width: 2.2em;
30  border-radius: 0.7em;
31  box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
32  right: 0.3em;
33  transition: all 0.3s;
34}
35
36.cssbuttons-io-button:hover .icon {
37  width: calc(100% - 0.6em);
38}
39
40.cssbuttons-io-button .icon svg {
41  width: 1.1em;
42  transition: transform 0.3s;
43  color: #7b52b9;
44}
45
46.cssbuttons-io-button:hover .icon svg {
47  transform: translateX(0.1em);
48}
49
50.cssbuttons-io-button:active .icon {
51  transform: scale(0.95);
52}
53