I have a HTML button that is setup like this:

How set image color to red on hover to prevent it to disappear effect?

https://jsfiddle.net/s7dLwp0r/

.btn {
  background-color: red;
  background-color: red;
  height: 39px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid red;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
}

.btn:hover {
  background-color: white;
  border: 1px solid red;
  color: red;
  text-transform: uppercase;
}

<button class="btn">
<img src="data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS4xMDciIGhlaWdodD0iMjQuOTc3IiB2aWV3Qm94PSIwIDAgMTkuMTA3IDI0Ljk3NyI PGRlZnM PHN0eWxlPi5hLC5ie2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MS41cHg7fS5he3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjc1IDAuNzUpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjEyOSAxMS42MDgpIj48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8 PGxpbmUgY2xhc3M9ImEiIHgyPSI5LjM0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzLjQ0NSkiLz48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuODkxKSIvPjwvZz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MTUuMjM0LDEwOTMuMDE5SDU2MDMuNzlsLTQuNTM3LDMuOTM3djE3LjkxNGExLjYzLDEuNjMsMCwwLDAsMS42MjUsMS42MjVoMTQuMzU2YTEuNjMxLDEuNjMxLDAsMCwwLDEuNjI2LTEuNjI1di0yMC4yMjZBMS42MywxLjYzLDAsMCwwLDU2MTUuMjM0LDEwOTMuMDE5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1OTkuMjUzIC0xMDkzLjAxOSkiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MDkuNTY5LDEwOTMuNzkydjVoLTMuMDUzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTYwMy41NjUgLTEwOTMuNDc4KSIvPjwvZz48L3N2Zz4="  alt="order"/>
&nbsp;order
</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Alternatively, you could use an SVG as your image source and then define the fill colour as follows:

.btn:hover svg {
   fill: green;
}

CodePudding user response：

Use invert filter on the hover of the button against the image.

JS Fiddle

for future changes, you can enter the color you want on this website and then use that as the filter

.btn {
  background-color: #C40000;
  background-color: #C40000;
  height: 39px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid #C40000;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
}

.btn:hover {
  background-color: white;
  border: 1px solid red;
  color: red;
  text-transform: uppercase;
}

.btn:hover>img {
  filter: invert(44%) sepia(100%) saturate(1313%) hue-rotate(312deg) brightness(93%) contrast(101%);
}

<button class="btn">
<img src="data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS4xMDciIGhlaWdodD0iMjQuOTc3IiB2aWV3Qm94PSIwIDAgMTkuMTA3IDI0Ljk3NyI PGRlZnM PHN0eWxlPi5hLC5ie2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MS41cHg7fS5he3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjc1IDAuNzUpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjEyOSAxMS42MDgpIj48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8 PGxpbmUgY2xhc3M9ImEiIHgyPSI5LjM0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzLjQ0NSkiLz48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuODkxKSIvPjwvZz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MTUuMjM0LDEwOTMuMDE5SDU2MDMuNzlsLTQuNTM3LDMuOTM3djE3LjkxNGExLjYzLDEuNjMsMCwwLDAsMS42MjUsMS42MjVoMTQuMzU2YTEuNjMxLDEuNjMxLDAsMCwwLDEuNjI2LTEuNjI1di0yMC4yMjZBMS42MywxLjYzLDAsMCwwLDU2MTUuMjM0LDEwOTMuMDE5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1OTkuMjUzIC0xMDkzLjAxOSkiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MDkuNTY5LDEwOTMuNzkydjVoLTMuMDUzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTYwMy41NjUgLTEwOTMuNDc4KSIvPjwvZz48L3N2Zz4="  alt="order"/>
&nbsp;order
</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>