CSSの:hoverの背景色変更サンプル

opacity: 0.8

.button {
  --button-bg: #007bff;
  background: var(--button-bg);
  transition: opacity 0.2s;
  width: 100%;
  max-width: 200px;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;

  @media (hover: hover) {
    &:hover {
      opacity: 0.8;
    }
  }
}

filter: brightness(1.2)

.button {
  --button-bg: #007bff;
  background: var(--button-bg);
  transition: filter 0.2s;
  width: 100%;
  max-width: 200px;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;

  @media (hover: hover) {
    &:hover {
      filter: brightness(1.2);
    }
  }
}

filter: brightness(0.8)

.button {
  --button-bg: #007bff;
  background: var(--button-bg);
  transition: filter 0.2s;
  width: 100%;
  max-width: 200px;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;

  @media (hover: hover) {
    &:hover {
      filter: brightness(0.8);
    }
  }
}

oklch (l * 1.2)

.button {
  --button-bg: #007bff;
  background: var(--button-bg);
  transition: background 0.2s;
  width: 100%;
  max-width: 200px;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;

  @media (hover: hover) {
    &:hover {
      background-color: oklch(from var(--button-bg) calc(l * 1.2) c h);
    }
  }
}

oklch (l * 0.8)

.button {
  --button-bg: #007bff;
  background: var(--button-bg);
  transition: background 0.2s;
  width: 100%;
  max-width: 200px;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;

  @media (hover: hover) {
    &:hover {
      background-color: oklch(from var(--button-bg) calc(l * 0.8) c h);
    }
  }
}

元記事を表示する