Animated hover effect for header buttons

Sometimes it’s the smallest touches that make a website feel alive. A subtle lift and wobble on your header button can turn a static element into something playful and human - without shouting for attention. Here’s a simple CSS snippet that adds just the right amount of movement when someone hovers over your call-to-action. No plugins, no drama - just a little charm.

---

Step 1: Add code to page header injection

1. Navigate to Design > Custom CSS.

2. Paste the following CSS code into the Custom CSS editor.

3. Make sure your heading button is set to ‘Primary’

4. Save your changes.

/* Gentle wobble + lift effect for header button */
.header-actions .sqs-button-element--primary {
  transition: transform 0.3s ease;
}

.header-actions .sqs-button-element--primary:hover {
  animation: gentleWobble 0.6s ease;
}

@keyframes gentleWobble {
  0%   { transform: translateY(0) rotate(0deg); }
  15%  { transform: translateY(-2px) rotate(-2deg); }
  30%  { transform: translateY(-2px) rotate(1.5deg); }
  45%  { transform: translateY(-2px) rotate(-1.2deg); }
  60%  { transform: translateY(-2px) rotate(1deg); }
  75%  { transform: translateY(-2px) rotate(-0.8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}