I need help making primary buttons fade to background color using code

Here is the custom CSS for my buttons:

 

.sqs-block-button
.sqs-button-element--primary {
    background-color: #d43f4c;
    border-color: #d43f4c;
    color: #000000;
}

.sqs-block-button
.sqs-button-element--secondary {
    background-color: #000000;
    border-color: #d43f4c;
    color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--tertiary {
    background-color: #000000;
    border-color: #d43f4c;
    color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--primary:hover {
    background-color: #000000;
    color: #d43f4c;
    border-color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--secondary:hover {
    background-color: #d43f4c;
    color: #000000;
    border-color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--tertiary:hover {
    background-color: #d43f4c;
    color: #000000;
    border-color: #d43f4c;
}

Secondary and Tertiary buttons fade to the corresponding background color by default without setting a fade animation. The primary would not fade no matter what code I wrote.

As long as I can get all button types to consistently fade, or not fade is fine with me. Here are the buttons.

14 hours ago, Hubris3D said:

Here is the custom CSS for my buttons:

 

.sqs-block-button
.sqs-button-element--primary {
    background-color: #d43f4c;
    border-color: #d43f4c;
    color: #000000;
}

.sqs-block-button
.sqs-button-element--secondary {
    background-color: #000000;
    border-color: #d43f4c;
    color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--tertiary {
    background-color: #000000;
    border-color: #d43f4c;
    color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--primary:hover {
    background-color: #000000;
    color: #d43f4c;
    border-color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--secondary:hover {
    background-color: #d43f4c;
    color: #000000;
    border-color: #d43f4c;
}

.sqs-block-button
.sqs-button-element--tertiary:hover {
    background-color: #d43f4c;
    color: #000000;
    border-color: #d43f4c;
}

 

Secondary and Tertiary buttons fade to the corresponding background color by default without setting a fade animation. The primary would not fade no matter what code I wrote.

As long as I can get all button types to consistently fade, or not fade is fine with me. Here are the buttons.

Can you share your URL so I can check it?

11 hours ago, Beyondspace said:

Can you share your URL so I can check it?

Hey, thanks for the reply. My website is not live at the moment. I have not resolved the issue, but I opted to use the flex animation instead and that worked out for me.

If you still need help, kindly provide a password for your site. Share it so we can check it easier

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords