ボタンとマウスアイコンのホバー効果を実現するためのCSSの使い方

1. ボタンのホバー効果: ボタンにマウスがホバーされたときに背景色や文字色を変更する方法です。

CSSコード例:

.button {
  background-color: #f1f1f1;
  color: #000;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.button:hover {
  background-color: #555;
  color: #fff;
}

2. マウスアイコンのホバー効果: マウスアイコンにホバーされたときに拡大や色の変更などの効果を追加する方法です。

CSSコード例:

.mouse-icon {
  width: 20px;
  height: 20px;
  background-image: url('mouse-icon.png');
  background-size: cover;
  transition: transform 0.3s ease;
}
.mouse-icon:hover {
  transform: scale(1.2);
}

これらの方法を使用すると、ボタンやマウスアイコンにホバー効果を追加することができます。さまざまなCSSプロパティや効果を組み合わせることで、独自のデザインを作成することも可能です。