Make the background glow when you mouse over

To make the background glow when you hover over it, set a: hover background to a slightly brighter color.

<style>
  .mouse-over-light a {
    color: white;
    padding: 10px;
  Width: 100%;
    background: # 2E75B6;
  }
  .mouse-over-light a: hover {
    background: # 3E85C6;
  }
</style>

<div class = "mouse-over-light">
  <a href="/"> The background glows when hovering</a>
</div>

How to make a slightly brighter color?

To create a slightly brighter color, add 1 to the top digit of each element of RGB (Red, Green, Blue). Since the RGB display is a hexadecimal number, 9 is followed by A.

# 2E75B6;

Since 2E is R, 75 is G, and B6 is B, adding 1 to the top digit gives the following.

# 3E85C6

What is the effect of shining when hovering?

When you bring the mouse up, it glows and you can intuitively press it.

On smartphones, it has nothing to do with it, so you should consider this effect as a supplementary effect and consider a design that you can press just by looking at it.

HTML・CSS Writing 2022