Expanding Button On Hover

Look Demo

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

ezgif-3-0a0b83351240.gif

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.

// Expanding 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(1.1) !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.

Notes

No notes.