Home > Q&A > body text

How to make hover functionality like in Windows 10 settings?

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.

P粉020556231

P粉020556231484 days ago552

reply all(1)I'll reply

P粉515066518

P粉5150665182023-09-13 00:20:32

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>

reply

Cancelreply