Primitus Consultancy

View Original

How to create a button hover effect on Squarespace 7.1

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