linear gradient bottom border on hover

Question

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.

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

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).

edited May 23 '17 at 12:23

Community

1
1

answered Dec 08 '15 at 10:25

web-tiki

99,765
32
217
249

thanks for the answer . here some questions: 1- how can I make the space between the word and the bottom-border because padding-bottom is not working....... 2- transition is not working with safari even when I add -webkit- any idea? Thank – Mohammed Moustafa Dec 08 '15 at 11:17
@MohammedMoustafa 1/ you can add margin-top to the pseudo element or line-height to the `a`. 2/ can you share the code you tested in safari please. – web-tiki Dec 08 '15 at 11:19
-webkit-transform: scaleX(0.0001); .................... -webkit-transition: transform 250ms ease-in-out;........... -ms-transform: scaleX(0.0001); .......................... -ms-transition: transform 250ms ease-in-out;................ transform: scaleX(0.0001); ................................ transition: transform 250ms ease-in-out;....................... – Mohammed Moustafa Dec 08 '15 at 11:27
@MohammedMoustafa ok, you are missing the `-webkit-` prefix in the `-webkit-transition ` declaration, see this : http://jsfiddle.net/webtiki/fn1yb3gb/ – web-tiki Dec 08 '15 at 11:31
@web-kiti you are right but unfortunately still not applying the transition effect on safari – Mohammed Moustafa Dec 08 '15 at 11:36
@MohammedMoustafa I tested the fiddle I shared in safari 8 and it works. what version are you testing it on? – web-tiki Dec 08 '15 at 12:18
@web-kiti Safari 5.1.7 – Mohammed Moustafa Dec 08 '15 at 14:05
1

@MohammedMoustafa first, that version is very outdated. Second it doesn't support transitions on pseudo elements so you need to add another element (like a span) and put the transition on that element. – web-tiki Dec 08 '15 at 14:09

Harry · Answer 2 · 2015-12-08T11:49:44.757

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).}

Thanks it's nice to do it that way and I'm happy with your code, But unfortunately is not working on safari any idea? — Mohammed Moustafa, Dec 08 '15 at 11:38
Yes it dose, but the translation effect is not applying on IE 11.0.25 thanks alot for your effort. — Mohammed Moustafa, Dec 08 '15 at 14:40
@MohammedMoustafa: That seems to be a known issue in IE11. `background-size` is not an animatable/transitionable property upto that version of IE. Upto IE11, it would degrade gracefully and produce the border without transition. **In Edge, it works perfectly fine.** — Harry, Dec 08 '15 at 14:46
Do you know any js file I can get to support all old versions of all browsers or most command browsers? — Mohammed Moustafa, Dec 08 '15 at 14:49
@MohammedMoustafa: Nope, supporting all versions of all browsers is impossible. I would say this approach already has reasonable browser support and a graceful fallback. Any further tweaks/hacks would only complicate it further. — Harry, Dec 08 '15 at 14:51

linear gradient bottom border on hover

2 Answers2