Modify the SVG's fill color on hover

Is there a way to modify the hover fill color of this SVG button?

This is the CSS rule I have attempted:

.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>

Appreciate any help!

htmlcsssvg

Answer №1

To update the fill property for the path within the svg during a a:hover event, you should modify the CSS as follows:

.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="Component 18 – 2"><g data-name="Group 129"><g data-name="Rectangle 6"><g data-name="Group 126"><g data-name="Group 125"><path data-name="Path 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="Group 128"><g data-name="Group 127"><path data-name="Path 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>

Consider assigning the class to the link itself rather than surrounding elements for better structure and functionality:

.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="Component 18 – 2"><g data-name="Group 129"><g data-name="Rectangle 6"><g data-name="Group 126"><g data-name="Group 125"><path data-name="Path 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="Group 128"><g data-name="Group 127"><path data-name="Path 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>

Answer №2

By making adjustments to your svg code, you can have more control over styling:

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

Try removing the fill attribute.

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

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

This allows you to change the text color on hover without directly selecting 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>

For more information, check out: How to change the color of an svg element?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing div as a dropdown menu

I have a challenge with the following code and I am looking to make it function like a dropdown one by one For example: ABCD ABCD 1234 ABCD 1234 abcd <ul class="first"> <li class="first-a"><a href="https://someurl">ABCD&l ...

jqueryhtmlcss

Store HTML content in cache for optimal rendering in WebView

My dilemma revolves around the need to showcase HTML content using a WebView control. This content is retrieved from a REST webservice as a string and might include images, CSS, and other elements that must be fetched from the server. While I could rely o ...

javaandroidhtmlcachingandroid-webview

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Learning to read HTML tags using JavaScript is a valuable skill

I've been struggling with a problem for some time now and I really need help fixing it. Here's the issue: I have an asp:GridView where I store text with HTML tags in my database under an English column. During the DataBound event, I use Context. ...

javascripthtmlasp.net

Substitute the information in the table with new data

I am working with an HTML table that has 5 columns, one of which contains dates. I need to convert the date format only if the data is not empty. To achieve this, I am utilizing moment.js for date formatting. While the date format conversion works perfect ...

javascripthtmljquerycss

Conceal the form upon submission using Angular JS

Currently trying to understand some Angular concepts and following a tutorial for practice. When I click the button below, a form is displayed. How can I hide this form once it has been submitted? Essentially, I want the form to disappear after submission ...

javascripthtmlangularjsforms

Is there a method to access a website, trigger JavaScript functions, and subsequently retrieve the HTML content using PHP?

I am currently exploring options to access a webpage, execute JavaScript functions on it (thus altering the HTML content), and eventually save the modified version of the page. I'm uncertain if this approach is feasible, and if not, are there alternat ...

javascriptphphtml

One common issue is being unable to target input[type=file] when multiple forms are present on a page using JavaScript

Question: I have multiple dynamic forms on a web page, each with a file input field. How can I specifically target the correct file input using $(this) in JavaScript? Here is an example of one of my forms: <form enctype="multipart/form-data" action="c ...

javascriptjqueryhtmlforms

Tailoring Width with css

Apologies for posing this question, but I am curious about customizing the width of a Parent Div that is currently set to 100px for both height and width, creating a square shape. Is it possible to adjust the width separately, such as top-width and bottom- ...

javascriptjqueryhtmlcss

Safari fails to refresh CSS when it comes to dynamic attributes

Take a look at this simple demonstration: http://jsfiddle.net/fE8ry/ I am attempting to modify the attribute of a div, and based on the attribute's value, apply the corresponding CSS. When the page loads, the attribute selector functions correctly a ...

csssafari

Is there a way to keep Angular from automatically re-sorting my list when I make edits to it?

I have designed a small application with Angular for managing Todolists. Each list contains multiple todos, where each todo has attributes such as name, value1, and value2. To automatically sort each list using Angular, I utilized ng-repeat="todo in selec ...

javascripthtmlangularjsjavascript-databinding

Implementing a PHP function to retrieve rating values when clicking on star icons

I am looking to implement a star rating system for users and update the database values accordingly after each rating. Below is my PHP code snippet: <?php foreach($genres as $genre){ $jsqla = mysql_query("select id,name,rate_score,rate_number,vide ...

phphtmlajax

Alignment issues with CSS3 navigation bar

After conducting thorough research on this topic, I realized that I am not alone in facing this issue. Unfortunately, the solutions provided by others with the same question did not resolve my problem. I have carefully configured my links for navigation wi ...

css

"Is there a way to modify the value of a CSS selector property dynamically within a React JS code

Is there a way to dynamically change the color of a specific selector in a React component? In my SCSS file, I have the following rule: foo.bar.var * { color: blue; } But I want to change this color to yellow, red, or something else in my React code. ...

cssreactjssasscss-selectorsradium

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

javascripthtmljquerycss

Changing the hover color of an Angular Material MD Button

<div class="non-active" layout layout-align='space-around center'> <md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == ' ...

javascriptcssangularjsangular-materialsaas

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

After creating a website using Next.js and Tailwind CSS, I noticed that the site is appearing zoomed in when viewed in Firefox. However, it looks fine in all other browsers. When I adjust the screen to 80%, the website displays correctly in Firefox. What ...

javascripthtmlcssreactjsnext.js

Disappearing Cloned Form Fields in jQuery

Hey there! I'm trying to duplicate a section of a form using the code below. But for some reason, the copied fields are only visible for a split-second before they disappear. Can anyone spot any errors that might be causing this strange behavior? jQu ...

javascriptjqueryhtml

Importing a 3D Model Using Three.js

I've been trying to import a 3D model by following tutorials. I managed to successfully import using A-Frame Tags, but encountering issues with Three.js. The code snippets are from a tutorial on YouTube that I referred to: https://www.youtube.com/watc ...

javascripthtmlthree.jsaframe