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