Issue
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">
Solution
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 0 0) bottom / 0% 2px no-repeat
#ccc;
transition: 1s;
}
#btn:hover {
background-size: 100% 2px;
}
<input id="btn" type="submit" name="" value="Click">
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.