diff --git a/src/shared/ui/Button/ui/Button.tsx b/src/shared/ui/Button/ui/Button.tsx index a907cac..879c24f 100644 --- a/src/shared/ui/Button/ui/Button.tsx +++ b/src/shared/ui/Button/ui/Button.tsx @@ -22,10 +22,14 @@ interface Props extends ButtonHTMLAttributes { } const VARIANTS: Record = { - primary: 'bg-blue text-cream outline-[3px] outline-cream', - secondary: 'bg-blue text-cream outline-[3px] outline-cream', - outline: 'bg-transparent text-blue border-blue', - ghost: 'bg-cream text-blue border-blue', + primary: + 'brutal-border bg-blue text-cream shadow-[5px_5px_0_rgba(4,28,243,0.35)] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[7px_7px_0_rgba(4,28,243,0.35)] active:translate-x-0.5 active:translate-y-0.5 active:shadow-[1px_1px_0_rgba(4,28,243,0.35)]', + secondary: + 'brutal-border bg-blue text-cream shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-md active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-xs', + outline: + 'brutal-border bg-transparent text-blue shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-md active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-xs', + ghost: + 'border-[3px] border-solid border-blue/35 bg-cream text-blue hover:border-blue hover:bg-blue/10 active:bg-blue active:text-cream', }; const SIZES: Record = { @@ -34,8 +38,9 @@ const SIZES: Record = { lg: 'px-8 py-4 text-lg', }; -const BASE = - 'brutal-border brutal-shadow transition-all duration-200 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0_var(--blue)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-[4px_4px_0_var(--blue)] uppercase tracking-wider'; +/* box-shadow excluded from transition intentionally — snaps instantly so the + * eye follows the 130ms button movement, not the shadow change. */ +const BASE = 'btn-transition uppercase tracking-wider'; /** * Brutalist button with variants and sizes.