Change button colour for single button on single page

On the below page I need to change the background colour of the black button under the red banner titled Book your Payroll Consultation. I don't want this to change anywhere else, just this button.

Colour change from #020202 to #41986c

https://wrpartners.co.uk/complete-outsourced-payroll-services

Thanks for any help and support.

Magic 🙏Thanks Ziggy 🙂 

1 minute ago, WR-Mike said:

Magic 🙏Thanks Ziggy 🙂 

No problem, happy to help!

Hi

Do you have code to change every button colour on every page?

I want them all the same colour gradient as the button on my header

www.brainforestcreative.com

Thanks

6 minutes ago, Immortal_Explorer said:

Do you have code to change every button colour on every page?

Remove this from your button code:

--medium 

Thanks,

I'm also trying to animate the buttons using the code from Ghost plugins.

// Animated Gradient Button //

.sqs-block-button .sqs-block-button-element--medium {
  background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

However, it only seems to change the one button on my landing page, I've tried changing 'medium' for 'large/small' etc, but to no avail.

Any suggestions?

www.brainforestcreative.com

Thanks

8 minutes ago, Ziggy said:

Remove this from your button code:

--medium 

Thanks, but that didn't work mate.

It's these two on the home page that I need to change (see attached)

Thanks

49 minutes ago, Immortal_Explorer said:

.sqs-block-button .sqs-block-button-element--medium

Replace that selector with this:

#siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary

That's worked now, thanks mate.

By the way, did you have the code to do this one please?

By the way, is there any way of excluding the (make all buttons colour gradient animated) from a specific page?

It's made the portfolio page look insane, lol

You can use this code to wrap around the previous:

body:not(#collection-650d5509ef29b64c981c83c4) {

//code here

}

Replace the collection ID to be for your portfolio page.

It's ok, I've fixed it

You can use this code to wrap around the previous:

body:not(#collection-650d5509ef29b64c981c83c4) {

//code here

}

Which part do I need to add, and where? I mean which strand of code am I adding it to please?

Thnaks

8 minutes ago, Immortal_Explorer said:

Which part do I need to add, and where? I mean which strand of code am I adding it to please?

You wanted to exclude the portfolio page from having the gradient color button code right? If so then add it around the code that makes the buttons have a gradient color.

Here's the full code:

// Animated Gradient Button //

body:not(#collection-643afedc7572ef34f045bbf2) {
  #siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary {
    background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);
    background-size: 400% !important;
    -webkit-animation: Gradient 10s ease infinite !important;
    -moz-animation: Gradient 10s ease infinite !important;
    animation: Gradient 10s ease infinite !important;
  }
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}