CSS - :hover

The :hover pseudo-class in CSS 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.

:hover 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.

DOM Syntax

:hover {
   /* ... */
}

CSS :hover - With Background-color Property

Here is an example of changing the background color of a link:

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   a {
      background-color: rgb(238, 135, 9);
      font-size: 1rem;
      padding: 5px;
   }
   a:hover {
      background-color: rgb(235, 235, 169);
   }
</style>
</head>
<body>
   <div>
      <h3>Hover example - link</h3>
      <a href="#">Hover over to see the color change!!!</a>
   </div>
</body>
</html>

CSS :hover - With Button Effect

Here is an example of changing the background color of a button:

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   button {
      background-color: greenyellow;
      font-size: large;
   }
   button:hover {
      background-color: gold;
   }
</style>
</head>
<body>
      <h3>Hover example - button</h3>
      <button>Hover me!!!</button>
   </div>
</body>
</html>

CSS :hover - With Border Effect

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

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

CSS :hover - With 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 - With Background Effect

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 - Rainbow 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;
      justify-content: center;
      align-items: center;
   }
   .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 OVER & CLICK!</button>
</body>
</html>

Print Page