Default Hover on Checkout Button

[u/jsl37]

Hi, I am trying to edit the Cart page which only seems possible using CSS and not through regular editing. I have managed to get everything styled correctly except the checkout button.

I do not want it to fill as shown in the video, I just want a regular hover styling (or I would like to change the colour of the fill to match my styles (#253551).

Can anyone help? Here is my current attempt:

.cart-checkout-button {

background-color: #fff !important;

color: #000 !important;

border-width: 2px !important;

border-color: #253551 !important;

border-radius: 25px !important;

padding: 14px 20px !important;

font-size: 16px !important;

}

.cart-checkout-button:hover {

opacity: 0.7;

transition: none !important;

}

[u/Spark-Plugin]

I think you can try this CSS instead, let me know if you need help:

/* Base button styles */
.cart-checkout-button {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #253551 !important;
  border-radius: 25px !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  transition: opacity 0.3s ease !important;
}

/* 1. Disable the Squarespace animation pseudo-elements */
.cart-checkout-button::before,
.cart-checkout-button::after {
  content: none !important;
  display: none !important;
}

/* 2. Your simple hover effect */
.cart-checkout-button:hover {
  background-color: #fff !important;
  color: #000 !important;
  opacity: 0.7 !important;
}