Selected Reading
Q&A

CSS - Hover

CSS Cursor Hover

The CSS :hover pseudo-class is used to target an element when the user hovers over it with the mouse cursor. Its purpose is to apply styles or trigger specific behaviors to enhance the user experience or provide additional visual feedback.

The CSS cursor hovering is a tool to make interactive elements more dynamic and engaging without requiring any user input beyond moving the mouse.

Applies to

HTML elements, such as buttons, links, images, etc.

CSS Syntax

:hover {
   /* ... */
}

CSS Hover - Link Color Change

Following is an example of changing the background color of a link when mouse cursor comes over it:

<html>
<head>
<style>
   a {
      background-color: #40a944;
      color: #fff;
      font-size: 1rem;
      padding: 10px;
   }
   a:hover {
      background-color: #cfe9d0;
      color: #000;
   }
</style>
</head>
<body>
   <div>
      <h2>Bring your cursor on the below link</h2>
      <a href="#">Hover over to see the color change!!!</a>
   </div>
</body>
</html>

CSS Hover - Background Color Change

Here is an example of changing the background color of a button when mouse cursor comes over it:

<html>
<head>
<style>
   button {
      background-color: greenyellow;
      padding: 10px;
      font-size: large;
   }
   button:hover {
      background-color: gold;
   }
</style>
</head>
<body>
      <h2>Bring your cursor on the below button</h2>
      <button>Hover me!!!</button>
   </div>
</body>
</html>

CSS Hover - Change Cursor Shape

Here is an example of changing the cursor shape when mouse cursor comes over the button:

<html>
<head>
<style>
   button {
      background-color: greenyellow;
      padding: 10px;
      font-size: large;
   }
   button:hover {
      cursor:pointer;
   }
</style>
</head>
<body>
      <h2>Bring your cursor on the below button</h2>
      <button>Hover me!!!</button>
   </div>
</body>
</html>

CSS Hover - Change Border Shape

Here is an example, where border of the link is changing on hover:

<html>
<head>
<style>
   .link {
      color: #40a944;
      text-transform: uppercase;
      padding: 20px;
      border: 4px solid #40a944;
      border-radius: 10px;
      display: inline-block;
   }
   .link:hover {
      color: #494949;
      border-radius: 45px;
      border-color: #494949;
   }
</style>
</head>
<body>
   <h2>Hover effect on border of the link</h2>
   <div class="button"><a class="link" href="#">Check my borders on hover</a></div>
</body>
</html>

CSS Hover - Adding Box Shadow

Here is an example, where box-shadow is added to the link on hover:

<html>
<head>
<style>
   a {
      font-size: 2rem;
      color: #071402;
      margin: 0 .25rem;
      padding: 0 .25rem;
      transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
   }
   a:hover {
      box-shadow: inset 100px 0 0 100px #9ce2cc;
      color: rgb(240, 32, 32);
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

CSS Hover - Growing Background

Here is an example, where the background grows over a link on hover:

<html>
<head>
<style>
   a {
      text-decoration-line: underline;
      color: #18272F;
      font-size: 2rem;
      position: relative;
   }
   a::before {
      content: '';
      background-color: rgba(118, 213, 83, 0.75);
      font-size: 2rem;
      position: absolute;
      left: 0;
      bottom: 3px;
      width: 100%;
      height: 10px;
      z-index: -1;
      transition: all .5s ease-in-out;
   }
   a:hover::before {
      bottom: 0;
      height: 100%;
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

CSS Hover - Ranbow Color Effect

Here is an example, where the underline of the link gives a rainbow color effect on hover:

<html>
<head>
<style>
   a {
      color: black;
      text-decoration: none;
      }
   a {
      background:
      linear-gradient(
      to right,
      rgb(179, 232, 168),
      rgb(185, 162, 215)
      ),
      linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 200, 50, 1)
      );
      background-size: 100% 5px, 0 5px;
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
      transition: background-size 700ms;
   }
   a:hover {
      background-size: 0 5px, 100% 5px;
   }
   body {
      display: grid;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 2rem;
      height: 100vh;
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

CSS Hover - Shadow Effect

Here is an example, where the a shadow effect is given to a button on hover:

<html>
<head>
<style>
   body {
      width: 100%;
      height: 100vh;
      display: grid;
   }
   .glow {
      padding: 10px;
      width: 250px;
      height: 50px;
      border: none;
      outline: none;
      color: #fff;
      background: #111;
      cursor: pointer;
      position: relative;
      z-index: 0;
      border-radius: 20px;
   }
   .glow:before {
      content: '';
      background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
      position: absolute;
      top: -4px;
      left:-4px;
      background-size: 400%;
      z-index: -1;
      filter: blur(15px);
      width: calc(100% + 6px);
      height: calc(100% + 6px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      border-radius: 10px;
   }
   .glow:active {
      color: rgb(246, 235, 235)
   }
   .glow:active:after {
      background: transparent;
   }
   .glow:hover:before {
      opacity: 1;
   }
   .glow:after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #111;
      left: 0;
      top: 0;
      border-radius: 10px;
   }
   @keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
   }
</style>
</head>
<body>
   <button class="glow" type="button">Hover & Click!</button>
</body>
</html>