Changing the colour of the "proceed to checkout" button

Hi

You’ve sort of started with this rule in your Custom CSS:

.woocommerce .button.alt {
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(center bottom , #0e8b8b 0%, #0e8b8b 100%) repeat scroll 0 0;
    border-color: #ff5700 #ff5700 #ff5700;
    border-style: solid;
    border-width: 1px;
    font-size: 1em;
    text-shadow: none;
}

That’s where the red border around the blue button is coming from. I’d suggest removing this rule entirely and any others you might have in media queries and add:

.woocommerce .button.alt {
  font-size: 1em;
  text-shadow: none;
  border-top: solid 1px #0086c5;
  border-left: solid 1px #007ebd;
  border-right: solid 1px #007ebd;
  border-bottom: solid 1px #0077b4;
  background: #00bcff;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00aaeb), color-stop(1, #00bcff));
  background: -ms-linear-gradient(bottom, #00aaeb, #00bcff);
  background: -moz-linear-gradient(center bottom, #00aaeb 0%, #00bcff 100%);
  background: -o-linear-gradient(#00bcff, #00aaeb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00bcff', endColorstr='#00aaeb', GradientType=0);
}
.woocommerce .button.alt:hover,
.woocommerce .button.alt:active,
.woocommerce .button.alt.disabled,
.woocommerce .button.alt:disabled,
.woocommerce .button.alt:disabled[disabled],
.woocommerce .button.alt.disabled:hover,
.woocommerce .button.alt:disabled:hover,
.woocommerce .button.alt:disabled[disabled]:hover {
  border-top: solid 1px #0090d4;
  border-left: solid 1px #0088cc;
  border-right: solid 1px #0088cc;
  border-bottom: solid 1px #0081c3;
  background: #0fc0ff;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00b5fa), color-stop(1, #0fc0ff));
  background: -ms-linear-gradient(bottom, #00b5fa, #0fc0ff);
  background: -moz-linear-gradient(center bottom, #00b5fa 0%, #0fc0ff 100%);
  background: -o-linear-gradient(#0fc0ff, #00b5fa);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0fc0ff', endColorstr='#00b5fa', GradientType=0);
}

Edit as required.

Hi Misplon,

I tried your above code but it didn’t work, thanks

but i used this one it it kinda worked, although it changed all buttons on my website, i would have rathered at least the continue shopping button a different color but with this code it changes every button on the website. I cannot seem to find any other code that works so i guess i will have to live with them all the same colour, here is the code:

a.button,
.button.alt,
.button,
input.button,
button.button,
a.comment-reply-link,
#commentform #submit,
#btn-cart a,
#btn-cart a span.btn-cart-inner {
background:#0e8b8b!important;
background:-webkit-gradient(linear,left top,left bottom,from(#0e8b8b),to(#0c7474))!important;
background:-webkit-linear-gradient(#0e8b8b,#0c7474)!important;
background:-moz-linear-gradient(center top,#0e8b8b 0%,#0c7474 100%)!important;
background:-moz-gradient(center top,#0e8b8b 0%,#oc7474 100%)!important;
border-color:#343538!important;
color:#ffffff!important;
text-shadow:0 -1px 0 rgba(0,0,0,0.6)!important;
}
a.button:hover,
.button.alt:hover,
.button:hover,
input.button:hover,
button.button:hover,
a.comment-reply-link:hover,
#commentform #submit:hover,
#btn-cart a:hover,
#btn-cart a span.btn-cart-inner:hover {
background:#0e8b8b;
background:-webkit-gradient(linear,left top,left bottom,from(#0e8b8b),to(#0c7474));
background:-webkit-linear-gradient(#0e8b8b,#0c7474);
background:-moz-linear-gradient(center top,#0e8b8b 0%,#0c7474 100%);
background:-moz-gradient(center top,#0e8b8b 0%,#0c7474 100%);
color:#343538;
text-shadow:0 -1px 0 rgba(0,0,0,0.6)
}
}
thanks again

Sure.

Did you edit the rule I sent? I pasted it above with default values. Every colour value would need to be edited. If you’d like me to help with just the checkout button colour then I’d need to see the site without the rules you just posted above and with the rule I originally sent, with your custom values.

Hope that make sense. I basically need to see the site at the sage where the new rule wasn’t working.

I changed all the color values in your rule and only one changed and it sent the button color purple for some reason. This new rule has made all the buttons aqua and it doesn’t look too bad, but the only problem I am facing now is i cannot get it to change on the iphones, it changed on ipad and desktop.
what would your suggestion be to change back to you rule or try and find a fix for iphones? i can do either

here is our website: https://www.scrapbookingdelights.com.au

It’s ok i just moved the media query 480px to the top of my css and it worked, so it’s all good all devices are now showing the aqua color for the buttons and that looks pretty good, so i think i will leave it. It seems I cannot change the “continue shopping” button in the cart as I think they are all coded under the same rule, if i change one they all change.

thanks again for your help

For sure ??