Adding a Background Image to a Button in Squarespace (plus a few other cool effects)

ButtonsFree

May 21

I received a question recently where someone was wondering if they could add a background image to a button on the Squarespace website. And you can! This post quickly jumps into doing that, and then some more.

The code provided shows you how to add a background image to a button on your website globally. If you want to do it to just to one button, add an id selector just before the global selector.

The main property you’ll want to be using is the background-image property.

The Tutorial

The Code

#siteWrapper.site-wrapper a.sqs-button-element--primary {
  background-image:url('https://images.unsplash.com/photo-1523676060187-f55189a71f5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80');
  background-size:cover;
  color:white;
  text-shadow: 2px 2px 2px black;
  border: 4px solid white;
  transition: transform 0.2s ease;

  /*Hover State*/
  &:hover{
    border: 2px solid white;
    margin: 2px;
    opacity: 1;
  }

  /*Active State*/
  &:active{
    transform:scale(.98)
  }
}

Hello, World!