Skip to content
Submitted over 1 year ago

Article Preview Component

Jiwon Suh•210
@suhjiwon95
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi! I'm Jiwon and I'm proud of myself that I finished this project!

My question is How do you change the color of the arrow button image when clicked or hovered

I have tried color: white; to the button icon, but it didn't work.

If you have an answer to my question or general suggestions, please comment below. I am happy to listen to you! :D

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi, regarding your question,

    You could do it this way:

    • insert the SVG image inline (using the <svg> element)
    • change the value of the fill attribute to currentcolor
    • and that's it, you can use the color property in CSS as usual to change the color of the arrow as if it were text.
    <button id="share-button">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13">
<path fill="currentcolor"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
</button>

    I hope it’s useful, and let me know if it worked : )

    Regards,

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord