How to create a button hover effect on Squarespace 7.1

Written By Primitus Consultancy

The hover effect makes your buttons more lively and makes your site more interesting to visitors.

Complexity: Easy

The first effect

.sqs-block-button-element:hover {background-color:#B1C8F2; color:#000}

 

The second effect

.sqs-block-button-element:hover { border-radius: 20px; color:#000}

 

The third effect

.sqs-block-button-element:hover {box-shadow: 2px 5px rgba(177, 200, 242, 0.7)}

To target particular buttons sizes which in this case are small, medium and large, simply use the following codes

Small -> .sqs-block-button-element--small

Medium -> .sqs-block-button-element--medium

Large -> .sqs-block-button-element--large

Home Blog
Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous

How to create buttons with equal width in Squarespace
Next

How to hide price on product pages in Squarespace 7.1