Mankind1023 Mankind1023 - 11 days ago 7
CSS Question

CSS - Text link larger than buttons

I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.

Here is the css:

.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}

.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}


I've looked at the chrome styles panel and confirmed the font / padding is being used (it's not strikken through).

Here is how it looks like:

enter image description here

Answer

To avoid this kind of stuff I always set the font family I used.

Take a look at this example: https://fiddle.jshell.net/tnr0jxka/

You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.