0

Im trying to add a linear effect on my input button. When the user hovers on the button, I want the bottom border line to start from center, and then go to right and left at the same time. So the line spreads out from center to the corners when the user hovers over it.

I managed to add a hover line, but it does not work as I want. I have looked around and I can only find questions regarding headings or tabs, not buttons. 

#btn {
  margin: 10px;
  padding: 20px;
  width: 470px;
  height: 50px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
}

#btn:hover {
  cursor: pointer;
  border-bottom: 2px solid red;
  transition: 0.3s;
}
<input id="btn" type="submit" name="" value="Click">
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Alison
  • 199
  • 1
  • 2
  • 11
  • *The line* as in bottom border? You might have to add a separate div and then increase its width and change its position using the jQuery [.hover()](https://api.jquery.com/hover/) – LinusGeffarth Feb 17 '18 at 11:25
  • @LinusGeffarth yes exactly, the bottom border! Will add it in my question! – Alison Feb 17 '18 at 11:27
  • @LinusGeffarth do you have any idea on how I can manage to do this on a button? – Alison Feb 17 '18 at 11:38

1 Answers1

7

You cannot use pseudo-element since it's an input tag so you can try this solution with linear-gradient as background:

#btn {
  margin: 10px;
  padding: 20px;
  width: 470px;
  height: 50px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background: 
    linear-gradient(red, red) bottom / 0% 2px no-repeat
    #ccc;
  transition: 1s;
}

#btn:hover {
  background-size: 100% 2px;
}
<input id="btn" type="submit" name="" value="Click">
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks it worked! But what makes it go from center to the sides? – Alison Feb 17 '18 at 12:02
  • @Alison at the start the background size is 0% 2px [width height] and placed at 50% 100% [x y] : center bottom ... then i simply increase the size and especially the width ... so the size increases while keeping the gradient at the center – Temani Afif Feb 17 '18 at 12:04