Chakra UI Gradient Button

This is the standard gradient button used throughout our project.

page.tsx

    <Button
        py="20px"
        px="16px"
        fontSize="md"
        variant="primary"
        borderRadius="45px"
        w={{ base: '100%' }}
        h="54px"
        onClick={handleTranslate}
        isLoading={loading ? true : false}
        _hover={{
        boxShadow:
            '0px 21px 27px -10px rgba(96, 60, 255, 0.48) !important',
        bg: 'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important',
        _disabled: {
            bg: 'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
        },
        }}
    >
        Generate your Essay
    </Button>

Chakra UI Footer Dashboard Chakra UI Hero Section