如何在 Chakra UI 上的按钮悬停时添加过渡持续时间？

Question

我无法在悬停按钮时添加过渡持续时间。

<Button 
       bgGradient='linear(to-r, #003e9b, #5949b4, #ad53cc 80%)' color='white' 
       _hover={{bg:'linear-gradient(to left,#003e9b ,#5949b4 ,#ad53cc 80%)',
                transitionDuration:'1s',}}
>
CONNECT WALLET TO BUY
</Button>

我在互联网上没有找到任何答案。

Answer 1

这对我有用。

<Button 
　position="relative"
　bgGradient='linear(to-l, #003e9b, #5949b4, #ad53cc 80%)'
　overflow="hidden"
　_before={{
    position: "absolute",
    content: `""`,
    width: "100%",
    height: "100%",
    bgGradient:'linear(to-r, #003e9b, #5949b4, #ad53cc 80%)',
    transition:'1s',
　}}
　_hover={{
    _before: { opacity: 0 }
　}}
>
　<Text zIndex="1" color={"white"}>CONNECT WALLET TO BUY</Text>
</Button>