WebDev%20For%20You%20-%20Daily%20Interaction%20%23112 - by WebDev%20For%20You
Created on Tue Apr 30 2019 16:50:37 GMT+0000 (Coordinated Universal Time)
This responsive website has 529 views, 0 comments, and 10 likes.
Welcome%20to%20Daily%20Interaction%20%23112.%0A%0AThis%20demo%20showcases%20a%20button%20animation%20on%20hover.%20With%20these%20buttons%20the%20border%20looks%20like%20it%20is%20cut%20at%20two%20specific%20points%20making%20the%20line%20look%20segmented.%20When%20you%20hover%20over%20the%20button%20the%20lines%20seem%20to%20move%20in%20a%20clock-wise%20fashion%2C%20and%20then%20in%20reverse%20when%20hovering%20out.%20This%20effect%20was%20achieved%20by%20placing%20two%20skewed%20div%20blocks%20at%20the%20top%20and%20bottom%20of%20the%20button%20with%20the%20same%20color%20as%20the%20background.%20The%20div%20block%20were%20also%20placed%20precisely%20on%20top%20of%20the%20button%20border.%20This%20makes%20it%20look%20like%20the%20border%20is%20being%20cut.%20Then%20those%20two%20block%20are%20moved%20left%20and%20right%20on%20hover%20to%20make%20it%20seem%20like%20the%20lines%20are%20moving.%20It%27s%20a%20subtle%20effect%2C%20but%20I%20think%20it%20can%20be%20very%20interesting%20as%20a%20hover%20state%20for%20a%20button%2C%20so%20the%20user%20knows%20something%20will%20happen%20when%20they%20click%20on%20it.%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Visit http://webdev-for-you-daily-interaction-112.webflow.io
