Button With Background Image
Look Demo
Add a background image to any button block. This plugin uses css editor and works with all template families.
How To Install
After adding a Button Block to any page, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.
// Small Background Image Button // .sqs-block-button .sqs-block-button-element--small { background: url(https://IMAGE-URL.png) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } // Medium Background Image Button // .sqs-block-button .sqs-block-button-element--medium { background: url(https://IMAGE-URL.png) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } // Large Background Image Button // .sqs-block-button .sqs-block-button-element--large { background: url(https://IMAGE-URL.png) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }
Customize
Change the background IMAGE-URL.png link to the image of your choice. Feel free to adjust width, opacity, padding, and text alignment to your liking.
To change the button’s shape (pill, rounded, or square) go to Design > Site Styles.
Need some images? Check out Unsplash.com – there you will find a huge selection of beautiful, free photos.
License
This plugin comes with an Unlimited Use License. View License Terms