Shrinking Button On Hover

Look Demo

Add a shrinking effect to any button block size when hovered. This plugin uses css editor and works with all template families.

How To Install

Add a button to any page with either a solid or outline button 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.

// Shrinking Button On Hover //

.sqs-block-button .sqs-block-button-element--medium {
    transition: transform 0.3s !important;
}
  
.sqs-block-button .sqs-block-button-element--medium:hover {
    opacity: 1 !important;
    transform: scale(0.9) !important;
}

Customize

The code works for the medium button block.

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

License

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