CODEWITHSUNDEEP
csshovercss-transitionslinear-gradients
Mohammed Moustafa
Mohammed Moustafa

Reputation: 630

linear gradient bottom border on hover

I'm trying to apply linear-gradient to border-bottom on hover to an <a> but it didn't work 100% My aim is to make this with HTML and CSS only if possible.

Here is my code:

a {
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;
}
a:after {
  content: '';
  position: absolute;
  left: -50%;
  right: 0%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-image: -webkit-linear-gradient(left, #f0f0f0, #0a389b, #f0f0f0);
  border-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  transition: all 0.5s linear;
  bottom: 0;
  opacity: 0;
}
a:hover:after {
  border-right: 25vh;
  right: 0%;
  opacity: 1;
}
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

As you can see the border-bottom is not in the center and is not suitable for the width of the <a> width.

Upvotes: 4

Views: 4758

Answers (2)

Harry
Harry

Reputation: 89780

You can also do this with linear-gradient by adding it as a background-image. For this to work, the background image should be positioned at the centre-bottom of the element and its size should initially be set to 0% in X-axis. On hover the size should be transitioned to 100% in the X-axis. The gradient's size in the Y-axis is the thickness of the border.

In this method you don't require any extra elements but browser support for gradients is lower than the support for box shadows. Linear gradients work only from IE10+.

a {
  display: inline-block;
  padding-right: 3%;
  padding-bottom: 3%;
  color: #666;
  font-size: 30px;
  text-decoration: none;
  cursor: pointer;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);  
  background-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
  background-position: 50% 100%;
  background-size: 0% 4px;
  background-repeat: no-repeat;
  transition: all 0.5s linear;
}
a:hover {
  background-size: 100% 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

As mentioned in the Can I Use - Notes, Safari doesn't support to [side] syntax for linear gradients and so add the below line for Safari support. 

background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

(Don't forget to add -webkit-transition also depending on the browser version).

Upvotes: 3

web-tiki
web-tiki

Reputation: 103810

You can use the same technique described here : Expand bottom border from center on hover with two box-shadows to create the fade out effect on the left and right edges :

a {
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;
}
a:after {
  display:block;
  content: '';
  height:4px;
  background:#019fb6;
  transform: scaleX(0.0001);  
  transition: transform 250ms ease-in-out;
  box-shadow: inset -40px 0px 30px -25px #fff, inset 40px 0px 30px -25px #fff;
}
a:hover:after {
  transform: scaleX(1);
}
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

Note : You need to insert vendor prefixes to maximize browser support (see canIuse).

Upvotes: 3

Related Questions