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


Related #css

Chakra UIで打ち消し線を使う

Strikethrough

Youtube動画で学ぶTailwind CSS

「Designing with Tailwind CSS」シリーズがとても分かりやすかった。

tailblocks

tailwind cssのテンプレート集

Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行う

next/ampのhybridモードを使い通常ページとAMPページを生成し、PostCSSでCSSの容量削減を行いinline cssとして埋め込み

Learn CSS

「Tailwind CSS Tips, Tricks & Best Practices」を観て学ぶ

動画を観ながら実際に手を動かして13個の練習問題を解いた