htmlcssmacosgoogle-chromemacos-mojave

What is the default height of an HTML button?


I want to make my button height just a slight bit bigger than the default, but I don't know what the default is. I want to make it dynamic, preferably using % or vh/vw, so that it looks good on every device. I also want to know the %/vw/vh that is default.

I used chrome to find the height of the body tag, in relation to the button height, and then I set the button height to 9vh with css, but this didn't work, the body's height just increased. I then set the body height to 100%, but this didn't make a difference.

My code:

.choice{
    width: calc(50vw - 12px);
    height: 25vh;
    text-align: center;
    line-height: 1em;
    font-size: 3.5vh;
    overflow: hidden;
    white-space: nowrap;
}

button, input[type="submit"]{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #0099FF;
  color: #FFFFFF;
  border-radius: 2px;
  border: 2px solid #0099FF;
  margin: 2px;
  height: 9vh;

}

button:hover, input[type="submit"]:hover{
    background-color: #FFFFFF;
    color: #000000;
}

I expected it to look the same as it would when the code would be like this ( I removed the height attribute in the button, input[type="submit"] section, but the buttons were extremely large instead!:

.choice{
    width: calc(50vw - 12px);
    height: 25vh;
    text-align: center;
    line-height: 1em;
    font-size: 3.5vh;
    overflow: hidden;
    white-space: nowrap;
}

button, input[type="submit"]{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #0099FF;
  color: #FFFFFF;
  border-radius: 2px;
  border: 2px solid #0099FF;
  margin: 2px; /* height used to be specified below */

}

button:hover, input[type="submit"]:hover{
    background-color: #FFFFFF;
    color: #000000;
}

Solution

  • I can't help but think that this is a poorly posed question.

    Edit:

    If you're aiming to have the button have dynamic height based upon the body, then you need to set a body height, and then set the button's height to a percentage of its parent. E.g. body height set to "100vh", and button height set to "70%" or something to that effect.