WebDev For You - Daily Interaction #81

Welcome to daily interaction #81. This button was a lot of fun to create. At first glance it looks like a fairly simple button with a few line animations, but quite a bit goes into creating it. You might think the lines are scaling, but because a few of the lines go in different directions on the hover out animation, I had to place the lines within wrappers and set the wrappers to an overflow of hidden. I then applied ‘move’ animations to each line so I could control from what directions the lines came in from on the different hover states. Scaling the lines does not allow for the transform-origin to be changed on the different hover states, so that is why I chose to use the ‘move’ option instead. There are 6 line wrappers with lines inside of them and they are all placed on different sides of the button with a position of absolute. Enjoy :). This button was inspired by the buttons on this website here: https://activetheory.net/lab/neon-tubes