How to add border bottom on hover effect?-CodePudding

How to add border bottom on hover effect as in this image

CodePudding user response：

Add :hover for your button like this:

button {
    width: 300px;
    height: 60px;
    border-radius: 10px;
    background-color: #d94346;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
}

/* Add hover effect */
button:hover {
    border-bottom: #bb262a 6px solid;
}

<button>Hover</button>

CodePudding user response：

Is this result what you were expecting for ? A box-shadowwould be more appropriate in my opinion.

EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.

button {
  font-size: 30px;
  padding: 30px 250px;
  color: white;
  background-color: #d84446;
  border: none;
  border-radius: 15px;
}

button:hover {
  box-shadow: 0px 7px 0px #bb262a;
  cursor: pointer;
}

<button>Hover</button>

CodePudding user response：

you should do it in the other order

button:hover {
    border-bottom: 4px solid #bb262a;
}