CSS customisation of buttons – post June 2022 update

Greetings

I'm trying to style a tertiary button to match the visual appearance of the nav bar dropdown…

Nav bar has this code:

.header-nav-folder-content * {
    color: white !important
}
.header-nav-folder-content {
  	background: linear-gradient(to bottom, #006C7F, #181B26)
}
.header-nav-folder-content {
	border: 1px solid #EBF6F7
}
.header-nav-folder-content {
	box-shadow: -3px 5px 5px rgba(0,0,0,0.25)
}

Something similar should work for the buttons, but many properties aren't being applied
e.g. background and border won't play nice in this snippet

.sqs-block-button .sqs-block-button-element--tertiary  { 
  	border-radius: 20px 20px 0px 0px;
  	background: linear-gradient(to bottom, #006C7F, #181B26);
	border: 3px solid #EBF6F7;
  	box-shadow: -3px 5px 5px rgba(0,0,0,0.25); 
   }

Once this is pinned down I will then add in hover states.

I'd rather stay with the button-element--tertiary naming for classes. Someone else will be maintaining the site once its live. Tertiary is more sensible a naming, than small, medium and large.

Where am I going wrong?

Thanks

Squarespace version 7.1
Theme: Hollie Beaumont  [I think. No theme info displayed in the Dashboard]
NOT using Fluid Engine

Can you share link to your site? We can check easier

On 9/3/2022 at 8:22 PM, tuanphan said:

Can you share link to your site? We can check easier

The button is near the bottom on the right hand side

https://www.robertvankoesveld.com/japan-tours/winter-2023-japan-tour

Thanks

add !important to make code has highest priority

.sqs-block-button .sqs-block-button-element--small, .sqs-block-button-element--tertiary {
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(to bottom,#006c7f,#181b26) !important;
    border: 3px solid #ebf6f7;
    box-shadow: -3px 5px 5px rgb(0,0,0,0.25);
}