Shivering Button

Look Demo

Add a shivering effect to any button block when hovered. This plugin uses css editor and works with all template families.

How To Install

Add a button block to any page. You can set the size to whatever you like.

Once a button has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Shivering Button Block //

.sqs-block-button .sqs-block-button-element--large:hover {  
  animation-name: shiver;
  animation-duration: 0.7s !important;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

// Shivering Animation //

@keyframes shiver {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

Customize

The code works for the medium button block. If you want to modify a small or large button, replace .sqs-block-button-element--medium text with either .sqs-block-button-element--small or .sqs-block-button-element--large.

DO NOT change any of the keyframes values.

License

This plugin comes with an Unlimited Use License. View License Terms