Second Color On Hover Button

• Look Demo
• How To Install
• Customize
• License

Show a different color when hovering over any button size. This plugin uses css editor and works with all template families.

From your Squarespace account, go to the Custom CSS Editor. 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.

Copy Code

// 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
}

Change the hover color to the color code you like.

This plugin comes with an Unlimited Use License. View License Terms