Enhance buttons with micro-interactions and animations

cgen-96fac6cacb7c47c1bb17f576a90d1b46
This commit is contained in:
Builder.io 2025-08-05 23:00:18 +00:00
parent caca6390c9
commit eec36cefaf

View file

@ -104,23 +104,23 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
)} )}
</div> </div>
<div className="flex justify-between pt-6"> <div className="flex justify-between pt-6 animate-slide-up">
<Button <Button
variant="outline" variant="outline"
onClick={prevStep} onClick={prevStep}
className="flex items-center space-x-2" className="flex items-center space-x-2 hover-lift interactive-scale group"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
<span>Back</span> <span>Back</span>
</Button> </Button>
<Button <Button
onClick={nextStep} onClick={nextStep}
disabled={!isValid || (data.userType === 'client' && !data.personalInfo.company)} disabled={!isValid || (data.userType === 'client' && !data.personalInfo.company)}
className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90" className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue group disabled:opacity-50 disabled:cursor-not-allowed"
> >
<span>Continue</span> <span>Continue</span>
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
</Button> </Button>
</div> </div>