Button With Background Image

• Look Demo
• How To Install
• Customize
• License

Add a background image to any button block. This plugin uses css editor and works with all template families.

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.

Copy Code

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

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.

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