Button With Background Image

Install Steps

Button With Background Image

Submitted by Moov Labs Works with all template families

backgroundbutton.png

Step One

After adding a Button Block to any page, go to the Custom CSS Editor from your Squarespace account: Design > Advanced > Custom CSS

Step Two

There is a style available for each button size. Copy and paste one – or all of the codes 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;
}

Step Three

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.

Save and refresh the page. 👍

Moov Labs