Add button hover animation effects

This commit is contained in:
2025-08-01 03:33:53 -04:00
parent cf420f5a62
commit 2af114ac9b
6 changed files with 47 additions and 10 deletions

View File

@@ -292,7 +292,12 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
<Download className="h-4 w-4" />
<span className="hidden sm:inline">Download</span>
</Button>
<Button variant="outline" size="sm" asChild className="gap-2">
<Button
variant="outline"
size="sm"
asChild
className="button-hover gap-2"
>
<Link
href={`/api/pdf-proxy?url=${encodeURIComponent(url)}`}
target="_blank"
@@ -325,7 +330,12 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
<Download className="h-4 w-4" />
<span className="hidden sm:inline">Download {title}</span>
</Button>
<Button variant="outline" size="sm" asChild className="gap-2">
<Button
variant="outline"
size="sm"
asChild
className="button-hover gap-2"
>
<Link
href={`/api/pdf-proxy?url=${encodeURIComponent(url)}`}
target="_blank"
@@ -367,7 +377,12 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
<Download className="h-4 w-4" />
<span className="hidden sm:inline">Download</span>
</Button>
<Button variant="outline" size="sm" asChild className="gap-2">
<Button
variant="outline"
size="sm"
asChild
className="button-hover gap-2"
>
<Link
href={`/api/pdf-proxy?url=${encodeURIComponent(url)}`}
target="_blank"

View File

@@ -50,13 +50,13 @@ export default function HomePage() {
</div>
</div>
<div className="animate-fade-in-up-delay-4 flex gap-3">
<Button variant="outline" asChild>
<Button variant="outline" asChild className="button-hover">
<Link href="/cv">
<ExternalLink className="mr-2 h-4 w-4" />
View CV
</Link>
</Button>
<Button variant="outline" asChild>
<Button variant="outline" asChild className="button-hover">
<Link href="/publications">
<BookOpen className="mr-2 h-4 w-4" />
Publications

View File

@@ -418,7 +418,7 @@ export default function AccessibilityPage() {
</div>
<div className="pt-4">
<Button asChild variant="outline">
<Button asChild variant="outline" className="button-hover">
<Link href="/projects">
<Eye className="mr-2 h-4 w-4" />
View All Projects

View File

@@ -274,7 +274,7 @@ export default function LatexTutorialPage() {
</div>
<div className="pt-4">
<Button variant="outline" asChild>
<Button variant="outline" asChild className="button-hover">
<Link
href="https://www.overleaf.com"
target="_blank"

View File

@@ -103,7 +103,11 @@ export default function ProjectsPage() {
<div className="flex gap-2">
{project.link && project.link.startsWith("/") && (
<Button variant="outline" asChild>
<Button
variant="outline"
asChild
className="button-hover"
>
<Link href={project.link}>
{project.title ===
"LaTeX Introduction Tutorial" ? (
@@ -122,7 +126,11 @@ export default function ProjectsPage() {
)}
{project.link && !project.link.startsWith("/") && (
<Button variant="outline" asChild>
<Button
variant="outline"
asChild
className="button-hover"
>
<Link
href={project.link}
target="_blank"
@@ -202,7 +210,11 @@ export default function ProjectsPage() {
</div>
{project.link && (
<Button variant="outline" asChild>
<Button
variant="outline"
asChild
className="button-hover"
>
<Link
href={project.link}
{...(!project.link.startsWith("/") && {

View File

@@ -241,6 +241,16 @@ body {
box-shadow: 0 4px 8px hsl(var(--foreground) / 0.1);
}
/* Button hover effects to match card interactions */
.button-hover {
transition: all 0.2s ease-in-out;
}
.button-hover:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px hsl(var(--foreground) / 0.1);
}
/* Equal height cards in grid layouts */
.grid-equal-height > * {
height: 100%;