Gradient Header Button?

Hey SS friends,
I'm trying to get my header button to be a gradient the same way as my body fonts.

https://matthewhooks.squarespace.com/

pw: hooks

Any ideas why the following code doesn't work?
 

/* Flipped Diagonal Three-Stage Gradient for Body Buttons */
.sqs-block-button-element,  {
background: #007991;
background: -webkit-linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
}

.sqs-block-button-element:hover{
background: #007991;
background: -webkit-linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
}

/* Flipped Diagonal Three-Stage Gradient for Header Button */
.header-actions-action--cta {
background: #007991;
background: -webkit-linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top right, #9C2079, #CF2E43, #EA542E);
}

.header-actions-action--cta:hover {
background: #007991;
background: -webkit-linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
background: linear-gradient(to top left, #9C2079, #CF2E43, #EA542E);
}