Project Innovation


#1

Hey guys, I've been trying out the projects in HTML, so far I'm on Project Innvation and they've got this amazing fade effect on their button hover, has anybody figured out how they did that yet? Any help would be great thanks.


#2

Its a transition effect, i learned about these with sololearn apps on my phone in my spare time. So basically you will want to add "transition: background .5s;" to your .btn:hover, what this does is tells your background to transition its background color from its standard (non-hover) to the new hovered background over a period of 5 seconds.

in the end your css for .btn:hover should look something similar to:

.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}

Hope this helps!


#3

MDN has a great article on it (link), you should check here if browser prefixes are required (-webkit, -moz), doesn't seem to be the case, support is now for IE10+, firefox 16+ (Firefox is ATM at 45), and opera 12.