Chakra UIでホバー時のボタンの背景色を変える

Chakra UIを使ってボタンを表示する際に、ホバー時にボタンの背景色を変えたかったのでやり方を調べた。

_hover 属性でホバー時の設定ができる。

<Button bg="#ff0000" _hover={{ bg: '#00ff00' }}>
  Button
</Button>

上記のボタンだと赤色のボタンが表示され、ホバーすると緑色に変化する。

参考

-　How to set a hover color on Icons? · Issue #363 · chakra-ui/chakra-ui