viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add aurora button variants with glow effects

Browse source
This commit is contained in:
zenchantlive 2026-02-26 15:17:45 -08:00
parent a8079813b8
commit 4ea6f38e09
2 changed files with 55 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/ui/button.tsx
View file

@ -19,6 +19,10 @@ const buttonVariants = cva(
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
aurora: "btn-aurora",
"aurora-primary": "btn-aurora-primary",
"aurora-success": "btn-aurora-success",
"aurora-danger": "btn-aurora-danger",
},
size: {
default: "h-9 px-4 py-2",

51
src/app/globals.css
View file

@ -393,3 +393,54 @@ body {
opacity: 1;
}
}
/* Aurora Button Styles */
.btn-aurora {
@apply relative overflow-hidden transition-all duration-200;
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.btn-aurora:hover {
border-color: rgba(148, 163, 184, 0.4);
box-shadow: 0 0 16px rgba(148, 163, 184, 0.1);
}
.btn-aurora-primary {
@apply relative overflow-hidden transition-all duration-200;
background: transparent;
border: 1px solid rgba(53, 201, 255, 0.4);
color: var(--ui-accent-info);
}
.btn-aurora-primary:hover {
border-color: rgba(53, 201, 255, 0.7);
box-shadow: 0 0 20px rgba(53, 201, 255, 0.2);
background: rgba(53, 201, 255, 0.05);
}
.btn-aurora-success {
@apply relative overflow-hidden transition-all duration-200;
background: transparent;
border: 1px solid rgba(53, 217, 143, 0.4);
color: var(--ui-accent-ready);
}
.btn-aurora-success:hover {
border-color: rgba(53, 217, 143, 0.7);
box-shadow: 0 0 20px rgba(53, 217, 143, 0.2);
background: rgba(53, 217, 143, 0.05);
}
.btn-aurora-danger {
@apply relative overflow-hidden transition-all duration-200;
background: transparent;
border: 1px solid rgba(255, 76, 114, 0.4);
color: var(--ui-accent-blocked);
}
.btn-aurora-danger:hover {
border-color: rgba(255, 76, 114, 0.7);
box-shadow: 0 0 20px rgba(255, 76, 114, 0.2);
background: rgba(255, 76, 114, 0.05);
}