How to give the links a gradient background color on hover? Link with a gradient background color on hover? and make it animated too? Just follow the steps below.

You must have seen the new link hover effect that I am using on this website? Today I’m gonna post about the same method, on how you can get the same gradient to hover effect on links.

You can check out the demo anywhere but still, I’ll post the complimentary video below.

Preview of Link with a gradient background color.

You might also like this.

How to make Link with a gradient background color on hover?

Link with a gradient background color on hover

It’s pretty simple and does not require any JS at all. Firstly, I’ll create 2 files, one for HTML and other for CSS. Inside that HTML file, I’ll just give it some empty links for demo. After linking the stylesheet, I’ll proceed with CSS.

CSS Part.

First, the main thing is to remove every decoration that exists for a link by using text-decoration:none;, using the ::before pseudo-class, I’ll give it a gradient background-colour using background-image: linear-gradient(60deg, royalblue 0%, skyblue 100%);. And make it move upwards using the transform property.

Code is pretty simple, just check it out to understand how it works, and visit other links in our website to see how it looks like in reality.

Source Code

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<TITLE>Evil Web Dev | Link with a gradient background color on hover</TITLE>
	<link rel="stylesheet" href="style.scss">
</head>
<body>
	
<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>

CSS

body {
   /* RESET */
   margin: 0;
   padding: 50px 0;
   
   background-color: #0a0a0a;
   font-family: 'Raleway', sans-serif;
   line-height: 26px;
}

.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, royalblue 0%, skyblue 100%);
   transition: transform .25s ease-out;
}

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

So this is how we create our Link with a gradient background color on hover. Below is it’s CodePen.

CodePen

See the Pen Link with gradient background on hover by Kamran Tahir (@EvilSpark) on CodePen.

0 CommentsClose Comments

Leave a comment