如何在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>