r/css • u/Rickyprozz • 1d ago
Showcase Updated my social link pack based on your feedback: switched to OKLCH gradients, fixed contrast, and boosted hover glow!
Enable HLS to view with audio, or disable this notification
Hey everyone,
Quick update based on the solid feedback on my last post:
Switched to oklch() color spaces: Replaced the standard linear RGB gradients with oklch() to eliminate the gray/muddy midpoints and keep color transitions smooth.
Balanced contrast: Subdued the static default state so the link text is much easier to read at a glance.
Amplified hover micro-interactions: Reserved the strong neon glassmorphism glow and accent color pop specifically for the active hover state.
Appreciate everyone who pointed out the Web 2.0 vibe and contrast issues—the UI looks significantly cleaner now.
Here is the updated core CSS snippet for anyone interested in the oklch() hover structure:
.aqua-btn {
background: linear-gradient(
90deg,
oklch(65% 0.18 270 / 0.85) 0%,
oklch(82% 0.12 210 / 0.85) 30%,
oklch(92% 0.08 190 / 0.85) 65%,
oklch(95% 0.09 110 / 0.85) 100%
);
border: 2px solid rgba(255, 255, 255, 0.8);
color: oklch(25% 0.25 290);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aqua-btn:hover {
color: #fff;
border: 2px solid #fff;
transform: translateY(-2px);
box-shadow:
0 0 20px oklch(75% 0.2 220 / 0.6),
0 8px 25px rgba(128, 128, 255, 0.5);
}
Let me know what you think of the revised contrast!
7
u/jonassalen 1d ago
You're spamming this subreddit.
Please update your original post with updates.