How do I change the button hover color in Squarespace?

Change Button Hover Color — Squarespace CSS

Squarespace 7.1 buttons use the .sqs-block-button-element selector. Override the :hover state to set your custom hover color. Add a CSS transition for a smooth color change.

Target primary and secondary buttons separately if you want different hover behaviors. Primary buttons use --primary variations, secondary use --secondary.

/* Primary button hover */
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
  transition: all 0.3s ease !important;
}

.sqs-block-button-element--small:hover,
.sqs-block-button-element--medium:hover,
.sqs-block-button-element--large:hover {
  background-color: #c1121f !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

Design custom button hover effects with our Button GeneratorTry it free →