Change fill color in a SVG when hover

Question

How can I change the fill color from this SVG button on hover please ?

The CSS rule I have tried:

.svg-button:hover {
  fill: #cc662f;
  transition: 0.3s;
}

<p class="svg-button">
  <a href="" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" width="325" height="50"><g data-name="Composant 18 – 1"><g data-name="Groupe 129"><g data-name="Rectangle 6"><g data-name="Groupe 126"><g data-name="Groupe 125"><path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" fill="none" stroke="#cc662f"/></g></g></g><g data-name="Rectangle 6"><g data-name="Groupe 128"><g data-name="Groupe 127"><path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" fill="none" stroke="#cc662f"/></g></g></g></g><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text></g></svg>
  </a>
</p>

Thanks.

I think the problem is with your selector, I don't see any element with a class `svg-button` at first glance. Try selecting the svg element you want the fill on like `sag g` or give a group path a class and then use the class selector or something — mrmonsieur, Jan 12 '22 at 18:50

Gleb Kemarsky · Accepted Answer · 2022-01-12T19:19:56.920

You need to change the fill property for the path in the svg on a:hover. So for example:

.svg-button a:hover svg path { 
     fill: #cc662f;
     transition: 0.3s;
}

<p class="svg-button">
    <a href="" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="325" height="50"><g data-name="Composant 18 – 1"><g data-name="Groupe 129"><g data-name="Rectangle 6"><g data-name="Groupe 126"><g data-name="Groupe 125"><path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" fill="none" stroke="#cc662f"/></g></g></g><g data-name="Rectangle 6"><g data-name="Groupe 128"><g data-name="Groupe 127"><path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" fill="none" stroke="#cc662f"/></g></g></g></g><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text></g></svg>
    </a>
</p>

But I would rather assign the class to the link. Let the a act as a button, and the p tag perform its intended functions as a paragraph of the text.

.svg-button:hover path { 
     fill: #cc662f;
     transition: 0.3s;
}

<p>
    <a class="svg-button" href="" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="325" height="50"><g data-name="Composant 18 – 1"><g data-name="Groupe 129"><g data-name="Rectangle 6"><g data-name="Groupe 126"><g data-name="Groupe 125"><path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" fill="none" stroke="#cc662f"/></g></g></g><g data-name="Rectangle 6"><g data-name="Groupe 128"><g data-name="Groupe 127"><path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" fill="none" stroke="#cc662f"/></g></g></g></g><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text></g></svg>
    </a>
</p>

score 1 · Answer 2 · answered Jan 12 '22 at 20:17

By tweaking your svg, you could gain additional styling controls:

<path d="..." stroke="#cc662f" >

remove fill attribute.

<text fill="currentColor" x="50%" y="50%" text-anchor="middle">CTA</text>

fill="currentColor": your text element will inherit its parent's text color.

This way you could also change the text color on hover. Besides you don't even need to select the <path>elements:

.svg-button {
  fill: none;
  color: #333;
  stroke: "#cc662f";
}

a:hover .svg-button {
  fill: #cc662f;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
}

<p>
  <a class="a-svg-button" href="#" target="_blank">
    <svg class="svg-button" xmlns="http://www.w3.org/2000/svg" width="325" height="50">
      <g data-name="Composant 18 – 1">
        <g data-name="Groupe 129">
          <g data-name="Rectangle 6">
            <g data-name="Groupe 126">
              <g data-name="Groupe 125">
                <path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" stroke="#cc662f" />
              </g>
            </g>
          </g>
          <g data-name="Rectangle 6">
            <g data-name="Groupe 128">
              <g data-name="Groupe 127">
                <path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" stroke="#cc662f" />
              </g>
            </g>
          </g>
        </g><text fill="currentColor" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text>
      </g>
    </svg>
  </a>
</p>

Further reading: How to change the color of an svg element?

Change fill color in a SVG when hover

2 Answers2