lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Play and More Info buttons with glassmorphism styles

Browse Source 
- Add hero-play-button with light mode glass effect (white background)
- Add hero-info-button with dark mode glass effect
- Apply gradient borders with ::before pseudo-elements
- Add hover animations with translateY and enhanced shadows
- Responsive padding: 10px/28px mobile, 12px/32px desktop
- Match nav button styling with proper backdrop blur and inset highlights

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 00:01:33 +00:00
parent b94226a7f4
commit 91dd58c0b2
1 changed files with 100 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/views/Browse.vue
View File

@@ -69,13 +69,13 @@
<!-- Action Buttons -->
<div class="flex items-center gap-2.5 md:gap-3 pt-1.5 md:pt-2">
<button class="px-5 md:px-7 py-2 md:py-2.5 bg-white text-black font-semibold rounded-md hover:bg-white/90 transition-all flex items-center gap-2 shadow-xl text-xs md:text-sm">
<button class="hero-play-button flex items-center gap-2">
<svg class="w-4 h-4 md:w-5 md:h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
Play
</button>
<button class="px-5 md:px-7 py-2 md:py-2.5 bg-white/20 text-white font-semibold rounded-md hover:bg-white/30 transition-all backdrop-blur-md flex items-center gap-2 text-xs md:text-sm">
<button class="hero-info-button flex items-center gap-2">
<svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
@@ -314,4 +314,102 @@ onUnmounted(() => {
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
}
/* Hero Button Styles */
.hero-play-button {
position: relative;
padding: 10px 28px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
border-radius: 16px;
background: rgba(255, 255, 255, 0.95);
color: rgba(0, 0, 0, 0.9);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 1);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: none;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
letter-spacing: 0.02em;
}
.hero-play-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(200, 200, 200, 0.3));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.hero-play-button:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 1);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.hero-info-button {
position: relative;
padding: 10px 28px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
border-radius: 16px;
background: rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 1);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: none;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
letter-spacing: 0.02em;
}
.hero-info-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.hero-info-button:hover {
transform: translateY(-2px);
background: rgba(0, 0, 0, 0.40);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (min-width: 768px) {
.hero-play-button,
.hero-info-button {
padding: 12px 32px;
font-size: 16px;
}
}
</style>