Border Highlight Button

• Look Demo
• How To Install
• Customize
• License

Add this animation to any button block. This plugin uses css editor and works with all template families.

Add a button to any page with the solid style.

Once a button has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

Copy Code

// Highlight Border Button //

.sqs-block-button-element--small{
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.sqs-block-button-element--small:hover
{
  box-shadow: inset 0 0 0 5px #FECB2F;
}

Replace the color #FECB2F value with the color of your choice.

The code works for the small button block. If you want to modify a medium or large button, replace all .sqs-block-button-element--small text with either .sqs-block-button-element--medium or .sqs-block-button-element--large.

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