如何在Chakra UI中为按钮的hover状态添加过渡时长？

你遇到的问题主要源于两点：

• CSS原生不支持直接对linear-gradient属性做过渡动画
• Chakra UI中过渡属性（如transitionDuration）需要定义在组件根样式中，而非仅在_hover状态内

方案1：利用背景位置过渡实现渐变滑动效果 #

这种方式通过调整背景位置模拟渐变方向切换的过渡，CSS支持background-position的过渡动画，适配Chakra UI的写法如下：

<Button
  color='white'
  bgGradient='linear(to right, #003e9b, #5949b4, #ad53cc 80%, #003e9b, #5949b4, #ad53cc 80%)'
  bgSize='200% 100%'
  transition='background-position 1s ease'
  _hover={{
    bgPosition: '100% 0'
  }}
>
CONNECT WALLET TO BUY
</Button>

原理：将渐变重复一次，设置背景宽度为200%，hover时将背景位置移至右侧，通过过渡属性让移动过程平滑完成，视觉上模拟渐变方向从右到左切换的效果。

方案2：通过伪元素叠加渐变实现过渡 #

如果需要严格的渐变方向反转过渡，可以用伪元素叠加两个不同方向的渐变，通过过渡伪元素的opacity实现切换：

<Button
  color='white'
  bg='linear-gradient(to left,#003e9b ,#5949b4 ,#ad53cc 80%)'
  position='relative'
  overflow='hidden'
  _before={{
    content: '""',
    position: 'absolute',
    inset: 0,
    bgGradient: 'linear(to-r, #003e9b, #5949b4, #ad53cc 80%)',
    transition: 'opacity 1s ease'
  }}
  _hover={{
    _before: {
      opacity: 0
    }
  }}
>
  <Box position='relative' zIndex={1}>CONNECT WALLET TO BUY</Box>
</Button>

原理：按钮本身设置hover状态的渐变背景，伪元素设置初始状态的渐变并默认覆盖按钮，hover时伪元素透明，露出按钮的hover背景，通过opacity过渡实现平滑切换。

内容的提问来源于stack exchange，提问作者Shubham Bathla