Submitted about 1 year ago

Article Preview Component

Jiwon Suh• 210

@suhjiwon95

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

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

@fernandolapaz

Posted about 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,

Please log in to post a comment

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