Skewed Border animation on hover | UI Design | HTML CSS

In this video we will see how to make skewed border animation on hover using html and css. #skewedborder #html #css css: *{ margin: 0; padding: 0; box-sizing: border-box; font-family: Calibri, 'Trebuchet MS', sans-serif; outline: none; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background: black; } .container{ position: relative; width: 300px; height: 400px; background: linear-gradient(235deg , #f74f58 , black , rgb(108, 236, 136)); padding: 20px 30px; text-align: center; z-index: 1; overflow: hidden; } img{ height: 100px; width: 100px; border-radius: 50%; } h1{ color: rgba(250, 202, 202, 0.8); margin-top: 10px; font-size: 2rem; } p{ color: rgba(104, 75, 75, 0.767); font-size: 20px; margin-top: 10px; } .details{ font-size: 14px; align-items: justify; color: ghostwhite; margin-top: 10px; } .container::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(235deg , #e939e5 , black , cyan); z-index: -1; transition:all ease-in-out 2s; } .container::after{ content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px ; right: 3px ; background: black; z-index: -1; } .container:hover::before{ transform: rotate(74deg); } For more such videos click link below: CSS Designs: /playlist/PLpp8-k7G_6Y0qOF9VhMkNDEmBm7oPjyBa Web Development: /playlist/PLpp8-k7G_6Y12qHyk1bNNSbYTBmFrNSr9 Python Projects: /playlist/PLpp8-k7G_6Y3Wj1suZQ-9lATFzFuGw93x Machine Learning Projects: /playlist/PLpp8-k7G_6Y2yJ9Pdv9AU0bdfJCOuLIth *************************************************************************************** Instagram : https://www.instagram.com/techie._.coder/ Facebook : https://www.facebook.com/techiecoder/?hc_ref=ARRyA6bdkrQEIUt3m_ZxYtYFjA02Qo1yscBsa5lCOQ8M8fH8NX6ikrjnUTPmur4TlYQ&fref=nf For my gaming channel : /channel/UCJEbHUHT8Q7r-KhlPKsZ59Q *************************************************************************************** tags: #webdevelopment #html #css #javascript

Category