JavaScript | Link with gradient background on hover (HTML, CSS) ...

<!DOCTYPE html>
<html lang="en" >

.container {
   width: 500px;
   margin: 0 auto;
   background-color: #fafafa;
   padding: 50px;
   box-shadow: 0 0 30px 30px #000;
   border-radius: 10px;
   font-size: 16px;
}

p { text-align: center; }
.link {
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 5px 5px;
   overflow: hidden;
   color: #333;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.link::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
   transition: transform .25s ease-out;
}

.link:hover { 
   color: #fff; 
}
.link:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}

.credits {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 20px;
   background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
   text-align: center;
   font-size: 10px;
   line-height: 20px;
   color: white;
   letter-spacing: 1px;
}

.credits > a {
   text-decoration: none;
   color: #fff;
   letter-spacing: 1px;
}
</style>

</head>

<body translate="no">
  <div class="credits">
   <b>LINK WITH GRADIENT BACKGROUND ON HOVER</b></div>
<div class="container">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a class="link" href="">tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip <a class="link" href="">ex ea commodo</a> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim <a class="link" href="">id est</a> laborum.</p>
</div>
  
  
  
</body>

</html>

Comments 0

Note: