feat: hover animations on all floating buttons
- Rotate 90°: PDF, leaf, info, theme, chat (symmetric icons) - Wiggle: email envelope (notification feel) - Scale pulse: keyboard shortcut (key press feel) - Bounce up: back-to-top arrow (reinforces direction)
This commit is contained in:
@@ -37,6 +37,11 @@
|
||||
background: var(--accent-green, #27ae60);
|
||||
}
|
||||
|
||||
.chat-toggle-btn:hover iconify-icon {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Icon swap: show mascot by default, close when active */
|
||||
.chat-toggle-btn .chat-icon-close {
|
||||
display: none;
|
||||
|
||||
@@ -122,6 +122,71 @@
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Floating Button Icon Hover Animations
|
||||
- Rotate: PDF, leaf, info, theme, close (symmetric icons)
|
||||
- Wiggle: email (envelope notification feel)
|
||||
- Pulse: keyboard (key press feel)
|
||||
- Bounce up: back-to-top arrow (reinforces direction)
|
||||
========================================================================== */
|
||||
|
||||
/* All floating icons: smooth transition */
|
||||
.download-btn iconify-icon,
|
||||
.print-friendly-btn iconify-icon,
|
||||
.fixed-btn.contact-btn iconify-icon,
|
||||
.shortcuts-btn iconify-icon,
|
||||
.info-button iconify-icon,
|
||||
.back-to-top iconify-icon,
|
||||
.color-theme-switcher iconify-icon,
|
||||
.chat-toggle-btn iconify-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Rotate clockwise: PDF, leaf, info, theme, chat close */
|
||||
.download-btn:hover iconify-icon,
|
||||
.print-friendly-btn:hover iconify-icon,
|
||||
.info-button:hover iconify-icon,
|
||||
.color-theme-switcher:hover iconify-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Wiggle: email envelope */
|
||||
.fixed-btn.contact-btn:hover iconify-icon {
|
||||
animation: iconWiggle 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes iconWiggle {
|
||||
0% { transform: rotate(0deg); }
|
||||
20% { transform: rotate(-12deg); }
|
||||
40% { transform: rotate(10deg); }
|
||||
60% { transform: rotate(-8deg); }
|
||||
80% { transform: rotate(5deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
/* Scale pulse: keyboard */
|
||||
.shortcuts-btn:hover iconify-icon {
|
||||
animation: iconPulse 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.25); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Bounce up: back-to-top arrow */
|
||||
.back-to-top:hover iconify-icon {
|
||||
animation: iconBounceUp 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes iconBounceUp {
|
||||
0% { transform: translateY(0); }
|
||||
40% { transform: translateY(-4px); }
|
||||
70% { transform: translateY(1px); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Hide keyboard shortcuts button on real mobile devices (no keyboard) */
|
||||
.is-mobile-device .shortcuts-btn,
|
||||
.is-mobile-device .zoom-toggle-btn,
|
||||
|
||||
Reference in New Issue
Block a user