Floating Button

---

Description

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); }    
}

---

Customize

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.

---