Change color of the heart of Like with css on c# and ASP.Net Core

Question

I have vote(like) on my code on C# (ASP .NET Core) Now I want , when I click on heart , the heart changes its color. How do I do just with CSS (Not jQuery) with checking of If Condition this is my Code on View :

 <div>

                                    <form method="post" asp-controller="Article" asp-action="AddArticleVote" asp-route-id="@article.Id">
                                        <button type="submit">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="32.044" height="32" viewBox="  0 32.044 32">
                                                <path id="prefix__comment-heart" d="M18.016 12.16a4.912 4.912 0 0 0-5.664.848 4.8 4.8 0 0 0 0 6.784L16.88 24.4a1.6 1.6 0 0 0 2.272 0l4.528-4.528a4.8 4.8 0 0 0 0-6.784 4.912 4.912 0 0 0-5.664-.928zm3.392 5.376l-3.392 3.392-3.392-3.392a1.6 1.6 0 1 1 2.256-2.272 1.6 1.6 0 0 0 2.272 0 1.6 1.6 0 1 1 2.256 2.272zM18.016 2a16 16 0 0 0-16 16 15.823 15.823 0 0 0 3.617 10.127l-3.2 3.2A1.56 1.56 0 0 0 3.617 34h14.4a16 16 0 1 0 0-32zm0 28.8H7.473l1.488-1.488a1.6 1.6 0 0 0 0-2.256 12.8 12.8 0 1 1 9.055 3.744z" transform="translate(-1.972 -2)" style="fill: #ccc"></path>
                                            </svg>
                                        </button>
                                    </form>

                                </div>

bas · Accepted Answer · 2021-06-20 17:40:29Z

1

You can target the path element and add :active styles:

path#prefix__comment-heart:active {
    fill: blue;
}

For this to work remove the style attribute inline fill styles as this takes precedence over the fill styles shown above.

If you want to keep the greyish fill color you have now for when the button is not being clicked you can aditionally target path#prefix__comment-heart without the :active suffix.

answered Jun 20, 2021 at 17:40

bas

15.2k7 gold badges28 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

hasti.au Over a year ago

I don't know how to write if condition. when I click on heart change color. I write my code on view that tell me how do I do?

bas Over a year ago

I don't really understand, have you tried my answer? The active styles above will apply when you click on the heart button. My answer is the css-only approach, no if statements required.

hasti.au Over a year ago

Sorry I think You see just CSS with out if condition. but I don't understand yet. How do I do? can you write me correct code? I Hade to change style in CSS? or just on my codes?

bas Over a year ago

Meaning of :active according to mdn: "The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.". So this works on click. You can put this code in a .css file. Relevant post for including styles in .net core applications

hasti.au Over a year ago

sorry for my initial questions. I am weak on CSS html :(. I found this code on another page that I get from Front Ended. I see he use this Code for some place for heart. straightly on view page. you mean this code? But after click on it color of heart doesn't change. Have I change on code?

|

Collectives™ on Stack Overflow

Change color of the heart of Like with css on c# and ASP.Net Core

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related