Change SVG icon color inside button on hover

PHOTO EMBED

Sun Mar 20 2022 17:28:54 GMT+0000 (Coordinated Universal Time)

Saved by @max_demydenko #js #svg #hover

/*JS*/
const handleButtonWithSvgHover = (buttonId, svgWrapperId, svgFillColorNew, svgFillColorOld) => {
	const button = $(`#${buttonId}`);
	const svgWrapper = $(`#${svgWrapperId}`);
	const svgPath = svgWrapper[0].children[0].children[0];
	svgPath.style.transition = "0.6s";

	button.mouseenter(() => {
		svgPath.setAttribute("fill", svgFillColorNew);
	})
	button.mouseleave(() => {
		svgPath.setAttribute("fill", svgFillColorOld);
	})
}

handleButtonWithSvgHover("arrow-down-btn", "arrow-down-svg", "white", "black");
/*JS*/


/*HTML markdown example*/
<button id="arrow-down-btn">
  <div id="arrow-down-svg">
    <svg width="22" height="28" viewBox="..." fill="none">
		<path d="..." fill="black"></path>
	</svg>
  </div>
</buton>
/*HTML markdown example*/
content_copyCOPY

This code changes the color of SVG <path/> on button hover Notes: - svgFillColorNew - color that will be set to SVG on hover - svgFillColorOld - color that will be set to SVG on mouse leave

https://agency-website-c0d1e7.webflow.io/