Issue
I just leanred CSS and try to doing some tutorials.
I have a button with this CSS
.btn {
padding: 9px 25px;
border-radius: 5px;
margin-left: 24px;
cursor: pointer;
}
.btn-sign-up {
font-size: 14px;
border-color: rgba(238, 67, 116, 1);
}
I just want button just change the color, and remove the border while i hover it.
But the result is just like this: image of the result
I've googled it, but got stuck because the result i got just another tutorial how to make my button move, not to make it doesn't move.
Sorry for my bad english. Thanks in advance!
Edit: After i try to make another button, this is because of border: none;
that makes my button move slightly. Is it any other way to make border away but the button doesn't move?
Solution
this is happening because you are removing the border. Instead of removing it, make it the same color as the background.
.button {
border: 1px solid red;
}
.button:hover {
background: red;
border-color: red;
}
Or, if you want the border to really disappear, use transparent
:
.button:hover {
background: red;
border-color: transparent;
}
Answered By - Tomek Buszewski
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.