WebDev For You - Daily Interaction #112

Welcome to Daily Interaction #112. This demo showcases a button animation on hover. With these buttons the border looks like it is cut at two specific points making the line look segmented. When you hover over the button the lines seem to move in a clock-wise fashion, and then in reverse when hovering out. This effect was achieved by placing two skewed div blocks at the top and bottom of the button with the same color as the background. The div block were also placed precisely on top of the button border. This makes it look like the border is being cut. Then those two block are moved left and right on hover to make it seem like the lines are moving. It's a subtle effect, but I think it can be very interesting as a hover state for a button, so the user knows something will happen when they click on it. To view more daily interactions and premium content visit: https://www.webdevforyou.com/