Custom css button animation doesn't work inside form block

Design help Animations & Interactions
1

Hi all,

I made a simple animation on hover for the buttons in my project using an ::after pseudoelement and the content property. I applied this styling to a class in an embed element. This works well in the designer and in the published site, but it doesn’t work when the class is applied to the form submit button.

Thanks :slight_smile:

Here’s the CSS I used:

.button-secondary {
transition: 300ms;
position: relative;
overflow: hidden;
color: #f5f7f8
}

.button-secondary:after {
content: “➜”;
position: absolute;
opacity: 0;
right: -1rem;
transition: 300ms;
z-index: 999 !important;
}

.button-secondary:hover {
padding-right: 3rem;
}

.button-secondary:hover:after {
opacity: 1;
right: 1rem;
}

Here is my public share link and published site link:

https://client-first-testing-43662d.webflow.io/

https://preview.webflow.com/preview/client-first-testing-43662d?utm_medium=preview_link&utm_source=designer&utm_content=client-first-testing-43662d&preview=823eb12e65b10cfcf8e6afc1dd544987&workflow=preview