Can someone tell me how to do a hover like this in css?
This is an example of a Windows 10 setup. But I want to replicate it in css.
You can use multiple gradient background images to get the effect on hover.
This is an example. Obviously, experiment with various settings until you get the look you want.
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can use multiple gradient background images to get the effect on hover.
This is an example. Obviously, experiment with various settings until you get the look you want.
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>