CSS, Codepen and Elementor

Does someone know why the following CSS animation doesn't work?

.btn soar {

box-shadow: 0 6px 18px 0 rgba(#000, 0.1);

turn out to be: translateY(-6px);

}

&–transparent {

coloration: $main;

background-coloration: transparent;

}

I'm attempting to prepare the 'Change into + Shadow' carry out considered on button 5 https://codepen.io/markmead/pen/xJxyGO

I don't desire any of the button styling, I gorgeous want to catch the animation and prepare it to my maintain button.

Is something love this that that you just might per chance maybe additionally mediate?

I if truth be told catch named my button class, btn to be aware the HTML and utilized the following code in Elementor.

Nothing occurs and it throws up the following errors:

Expected end of imprint but came in some unspecified time in the future of 'rgba (#000 , 0.1)

Unexpected token '&' at line 5, col 3.

Unexpected token '-' at line 5, col 4.

Unexpected token '$' at line 6, col 12.