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

 

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.




#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!

Will Myers

I support web designers and developers in Squarespace by providing resources to improve their skills. 

https://www.will-myers.com
Previous
Previous

Adding a Search Bar To Your Header In Squarespace 7.1

Next
Next

Words of Wisdom: Making the Inevitable Obvious