txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: button hover animations — PDF 45°, wiggle for info/keyboard/bot

Browse Source
This commit is contained in:
juanatsap
2026-04-09 14:01:25 +01:00
parent e865e0d9e0
commit 9f6b44b478
2 changed files with 11 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_chat.css
+1 -2
View File
@@ -38,8 +38,7 @@
} }
.chat-toggle-btn:hover iconify-icon { .chat-toggle-btn:hover iconify-icon {
transform: rotate(90deg); animation: iconWiggle 0.5s ease;
transition: transform 0.3s ease;
} }
/* Icon swap: show mascot by default, close when active */ /* Icon swap: show mascot by default, close when active */
static/css/04-interactive/_scroll-behavior.css
+10 -16
View File
@@ -142,16 +142,21 @@
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
/* Rotate clockwise: PDF, leaf, info, theme, chat close */ /* Rotate 45°: PDF */
.download-btn:hover iconify-icon, .download-btn:hover iconify-icon {
transform: rotate(45deg);
}
/* Rotate 90°: leaf, theme */
.print-friendly-btn:hover iconify-icon, .print-friendly-btn:hover iconify-icon,
.info-button:hover iconify-icon,
.color-theme-switcher:hover iconify-icon { .color-theme-switcher:hover iconify-icon {
transform: rotate(90deg); transform: rotate(90deg);
} }
/* Wiggle: email envelope */ /* Wiggle: email, info, keyboard, chat bot */
.fixed-btn.contact-btn:hover iconify-icon { .fixed-btn.contact-btn:hover iconify-icon,
.info-button:hover iconify-icon,
.shortcuts-btn:hover iconify-icon {
animation: iconWiggle 0.5s ease; animation: iconWiggle 0.5s ease;
} }
@@ -164,17 +169,6 @@
100% { transform: rotate(0deg); } 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 */ /* Bounce up: back-to-top arrow */
.back-to-top:hover iconify-icon { .back-to-top:hover iconify-icon {
animation: iconBounceUp 0.4s ease; animation: iconBounceUp 0.4s ease;