Add press effect, glow, arrow slide, easing, and backdrop blur to nav buttons
- :active scale(0.95) press feel on all nav buttons - box-shadow glow ring on hover (accent @ 20% opacity) - cubic-bezier(.2,0,0,1) iOS-style snap easing on all transitions - backdrop-filter: blur(10px) frosted glass base on all buttons - Dashboard → arrow wraps in <span class="arr"> and slides 2px right on hover Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
3c927b3e27
commit
344f0dd48e
3 files changed
+46
-9
No files matched your search
+10
-2
@@ -124,14 +124,22 @@ a:hover { text-decoration: underline; }
|
||||
padding: 0.35rem 0.85rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
transition: background .15s, border-color .15s, color .15s;
|
||||
background: color-mix(in srgb, white 5%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition: background .18s cubic-bezier(.2,0,0,1),
|
||||
border-color .18s cubic-bezier(.2,0,0,1),
|
||||
color .18s cubic-bezier(.2,0,0,1),
|
||||
box-shadow .18s cubic-bezier(.2,0,0,1),
|
||||
transform .1s cubic-bezier(.2,0,0,1);
|
||||
}
|
||||
.station-link:hover {
|
||||
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
}
|
||||
.station-link:active { transform: scale(0.95); box-shadow: none; }
|
||||
|
||||
.settings-nav-links {
|
||||
display: flex;
|
||||
|
||||
Reference in new issue
Block a user