Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
On-hover effects: buttons, part 3
Another button and another effect that is similar to the previous ones: when you hover the mouse, let’s make the icon disappear gradually using the opacity
property and simultaneously show the .hidden
hidden block. In this case, you can also supplement the effect with the fact that the hidden block will initially be “collapsed” by the scale
property to zero, and when it appears, it will increase in size with increasing opacity.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
- For
.btn-blue:hover .icon
, setopacity
to0
. - For
.btn-blue:hover .hidden
, set thescale
transform to the value1
and theopacity
to1
. - For
.btn-blue .hidden
, set thescale
transform to the value0
.
After you complete every change, hover the cursor over the blue button to check your work.
Comments