WebDev For You - Daily Interaction #94

Welcome to daily interaction #94! This demo showcases a button animation on hover. What's interesting about this button is that it doesn't seem to have a hover out animation. Every time the button is hovered the same effect with the text moving up occurs. This was achieved by having two text boxes on top of each other and then applying an overflow of hidden to the text wrapper, so it only seems like there is one text. Both text boxes have a line-height of 20 pixels so for the animation I moved the top and bottom text up 20 pixels. I also applied a child perspective to the button wrapper so that I could rotate the bottom text in to give it a more 3d effect. The bottom text also starts at -90 degrees on the x-axis so it rotates in. For the hover out animation I reset everything back to 0 with no duration so it seems like the text just stays in place, and then the animation occurs again when the user hovers. Inspired by the button on this Samsung home page: https://dowhatyoucant.at/