Floating Button

Look Demo

Add a simple floating effect to any button block size. This plugin uses css editor and works with all template families.


How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Floating Button Block //

.sqs-block-button .sqs-block-button-element--medium {  
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;

@keyframes floating {
  from { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  to   { transform: translate(0, 0px); }    


To change the main color of the button, go to Site Styles.

Do not change any of the @keyframes values.

If you want to target a small or large button, replace .sqs-block-button-element--medium with either .sqs-block-button-element--small or .sqs-block-button-element--large.


No notes.

Moov Labs