Important note:

This version is deprecated and will not be supported from 1 May 2018. A new version is available at https://stas-melnikov.ru/books/hctasks/tasks/the-animation-with-the-currentcolor-keyword/

The animation with the currentColor keyword

Demo: https://codepen.io/melnik909/pen/jYoeOX

Task description

I have made a new CSS animation for buttons on my project some days ago.

I had to change thee text color and the icon color while the mouse cursor hovers the button. I did it as follows:

.button:hover{
    color: #fff; /* Changing text color to white */
}

.button:hover .button__icon{
    fill: #fff; /* Changing icon color to white */
}

All perfect! So I decided to show it off to my friend. But … when he looked at my button he said that color changing could be easier with the currentColor variable.

I’m interested a lot to do it, but I can’t figure it out myself. Help me, guys!

Why you need to support the project

I want to share my knowledge with you but creating posts takes a long time. Therefore I'm looking for subscribers who will financially support me. Your money will go towards the development of the HCTask project and creating my book about HTML and CSS. Together we can do it. Thank you!

PayPal: https://www.paypal.me/melnik909