mirror of
https://github.com/soconnor0919/personal-website.git
synced 2025-12-12 23:04:43 -05:00
Add button hover animation effects
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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("/") && {
|
||||
|
||||
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user