これはなに

React + Tailwind CSSで、ボタンをホバーしたときにちょっと色を変えるときの実装メモ。

実装

やり方はいくつかある。

• 明るさを変える
• コントラストを変える
• 彩度を変える
• 色を変える

この中でも、明るさを変えるのがもっとも簡単でそれっぽくなる。

ライトモードでは、ボタンをホバーしたときに背景色を少し明るくする。これは、hover:brightness-110を設定すると実現できる。

ダークモードでは、ボタンをホバーしたときに背景色を少し暗くする。これは、hover:brightness-90を設定すると実現できる。

実装例を以下に示す。

import React from 'react';

export function CustomButton(): React.JSX.Element {
  return (
    <button
      className={[
        'bg-blue-500 text-white',
        'hover:brightness-110 dark:hover:brightness-90',
      ].join(' ')}
    >
      ボタン
    </button>
  );
}

参考文献・URL

• Claude 3.5 Sonnet