Harugawa Harugawa - 1 month ago 15
CSS Question

Button outline is larger than button dimensions

I was trying to make a button with 3 dots. Though it came with weird problem. When you click on it, you will notice a weird "mountain" while it is in focus mode.



button {
letter-spacing: 2px;
padding-top: .4em;
padding-bottom: .8em;
line-height: 0;
font-weight: 800;
background: black;
border: 0;
color: red;
}

<button>...</button>





Jsfiddle

How do I remove it or what is causing it?

Answer

The "mountain" is there because the font-size is larger in height than the actual button. If you remove the text you'll notice the mountain is gone.

To fix this, you could simply add overflow: hidden to make sure the text doesn't clip through the button.

button {
  letter-spacing: 2px;
  padding-top: .4em;
  padding-bottom: .8em;
  line-height: 0;
  font-weight: 800;
  background: black;
  border: 0;
  color: red;
  overflow: hidden;
}
<button>...</button>

You also seem to have more padding than necessary, which seems to cause negative inner dimensions of your button and other "glitches". Double-check those.