Second Color On Hover Button

textoutline.png

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

There is a style available for each button size. Copy and paste one – or all of the codes below into the Custom CSS Editor box.

// Small Solid Button's Hover Color //

.sqs-block-button .sqs-block-button-element--small {
  transition: background-color .5s; //animation speed
}
  
.sqs-block-button .sqs-block-button-element--small:hover {
  background-color: #00CBBA; //color on hover
}

// Medium Solid Button's Hover Color //

.sqs-block-button .sqs-block-button-element--medium {
  transition: background-color .5s; //animation speed
}
  
.sqs-block-button .sqs-block-button-element--medium:hover {
  background-color: #00CBBA; //color on hover
}

// Large Solid Button's Hover Color //

.sqs-block-button .sqs-block-button-element--large {
  transition: background-color .5s; //animation speed
}
  
.sqs-block-button .sqs-block-button-element--large:hover {
  background-color: #00CBBA; //color on hover
}

Step Three

Change the hover color to the color code you like.

Save and refresh the page. 👍

Moov Labs