Shivering Button
Description
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. Set the size to whatever you like.
Once a button has been added, 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.