Button mit Kreis das sich nach rechts bewegt

[melojezzed]

Hallo zusammen,
ich mache mir eine neue Seite und finde diesen Button mega schön: ttps://codepen.io/avstorm/pen/oqKbL

Den SCSS Code habe ich CSS geändert:
$color: #111;
$primary: #FFAB9D;

html, body {
height: 100%;
}

body {
display: grid;
font-family: Avenir, sans-serif;
color: $color;
}

a {
text-decoration: none;
color: inherit;
}

.cta {
position: relative;
margin: auto;
padding: 19px 22px;
transition: all .2s ease;
}

.cta:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 28px;
background: rgba($primary,.5);
width: 56px;
height: 56px;
transition: all .3s ease;
}

.cta span {
position: relative;
font-size: 16px;
line-height: 18px;
font-weight: 900;
letter-spacing: .25em;
text-transform: uppercase;
vertical-align: middle;
}

.cta svg {
position: relative;
top: 0;
margin-left: 10px;
fill: none;
stroke-linecap: round;
stroke-linejoin : round;
stroke : $color;
stroke-width :2;
transform : translateX(-5px);
transition : all .3s ease;
}

.cta:hover:before {
width :100%;
background :rgba($primary,1);
}

.cta:hover svg {
transform : translateX(0);
}

.cta:active {
transform : scale(.96);
}

Trotzdem sieht der Button nicht so aus wie gewünscht. Ich nutze zwar Wordpress und Elementor, aber ich versucht den Code rein mit HTML und CSS zu erzeugen, so wie in dem Beispiel. Was mache ich falsch?

Vielen Dank fürs Feedback!

 

[Sempervivum]

Das scheint dieser Pen zu sein:
https://codepen.io/avstorm/pen/oqKbLq
In dem CSS, das Du gepostet hast, sehe ich noch $-Zeichen. Fraglich ob Du das wirklich korrekt konvertiert hast und sehr wahrscheinlich liegt es daran, wenn es nicht funktioniert.