filterプロパティを効かせる対象を指定して使いたいのですが可能でしょうか？

Question

以下のようにボタンの背景色と影がカラフルに変化するコードを書いたのですが、テキストだけは黄色のまま変わってほしくないです。
そのために、filterプロパティが効く対象を「background-color」と「box-shadow」だけにするというような指定は可能でしょうか？
https://codepen.io/sino3325/pen/bGMMVpL

Comments

[miyabi_pudding]

filter: hue-rotate(0deg);
が何をしているCSSかはご理解しておりますか？
そこがわかれば、自ずと答えの方針がでるかと思います。

Answer 1

背景要素の::beforeにfilterをかけると、子要素に影響しなくなります。

.box {
  padding: 10px;
  cursor: pointer;
  position: relative;
}

/* beforeにフィルターをかける */
.box::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: tan;
  box-shadow: 0 0 10px tan,
    0 0 20px tan,
    0 0 40px tan,
    0 0 80px tan,
    0 0 120px tan;
  animation: color 5s linear infinite;
  z-index: -1;
}

Comments

[sino3325]

回答ありがとうございます。
おかげさまで解決しました。