CODEWITHSUNDEEP
htmlcssmacosgoogle-chromemacos-mojave
Nv7
Nv7

Reputation: 426

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;
}

Upvotes: 1

Views: 3974

Answers (2)

slowdncnintherain
slowdncnintherain

Reputation: 1

about 22-23px, if that helps! it's not completely right, but i once wanted my button to be 'just bigger than the original', so i adjusted it's height a few times to see if it looked close to the original. it definitely lies b/w 22-25px.

Upvotes: 0

Sunoo Bertsch
Sunoo Bertsch

Reputation: 61

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

  • Why do you want the button height to be "slightly bigger than default"? Presumably, you'd either want a fixed height, or a dynamic height that responds to the screen size. I fail to understand why you'd want an arbitrary size based upon HTML's default values. The default height of the button will be dependent on the font size anyways.

  • If you don't set a body height, then it will be determined by the size of it's children. If you have a body tag with so set height, and then add a button with 9vh, your body will also be 9vh.

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.

Upvotes: 0

Related Questions